Zenith
|
|
-
-
Rank:Emerald
- Score:89070
-
From:Canada
- Register:07/31/2019 10:06 PM
|
Date Posted:10/28/2022 4:56 PMCopy HTML
One way to make simple HTML games is to study tables. Copy the code in post-2 below to a text word processor.
Save as TABLES01.HTML, then click it.
Change various parameters in the code one-by-one and see what happens. Good luck!.
Get Notepad++ at: CLICK HERE FOR D/L for a better coding experience. Set language for HTML.
The table will look like below, before you mess with it:
CONCEIVE, BELIEVE, ACHIEVE!
|
Zenith
|
#1
|
-
-
Rank:Emerald
- Score:89070
-
From:Canada
- Register:07/31/2019 10:06 PM
|
Re:HTML TABLE TUT
Date Posted:10/28/2022 4:57 PMCopy HTML
colm-11 | colm-12 | colm-13 | colm-21 | colm-22 | colm-23 |
|
|
CONCEIVE, BELIEVE, ACHIEVE!
|
Zenith
|
#2
|
-
-
Rank:Emerald
- Score:89070
-
From:Canada
- Register:07/31/2019 10:06 PM
|
Re:HTML TABLE TUT
Date Posted:10/28/2022 4:58 PMCopy HTML
<div>
<table id="T1" style="
width:auto;
border:5px solid gold;
border-spacing:20px;
padding:0px;
background-color:green;
">
<tbody>
<tr>
<td>
<table id="T2" style="
width:auto;
border:5px solid gold;
border-spacing:0px;
padding:0px;
background-color:white;
">
<tbody>
<tr>
<td>
<table id="T3" style="
width:100%;
text-align:center;
border-spacing:0px;
padding:10px;
border:1px solid black;
">
<tbody>
<tr>
<td style="
background-color:#FFFFDD;
border:1px solid black;
">
<p> </p>
<font color="green" size="5" >INNER TABLE</font>
<p> </p>
</td>
</tr>
</tbody>
</table>
<table id="T4" style="
width:auto;
margin:0px auto;
border-spacing:2px;
padding:10px;
border:1px solid black;
">
<tbody>
<tr style="background-color:#DDFFFF;">
<td style="border:1px solid black;">colm-11</td>
<td style="border:1px solid black;">colm-12</td>
<td style="border:1px solid black;">colm-13</td>
</tr>
<tr style="background-color:#FFDDFF;">
<td style="border:1px solid black;">colm-21</td>
<td style="border:1px solid black;">colm-22</td>
<td style="border:1px solid black;">colm-23</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
CONCEIVE, BELIEVE, ACHIEVE!
|
Zenith
|
#3
|
-
-
Rank:Emerald
- Score:89070
-
From:Canada
- Register:07/31/2019 10:06 PM
|
Re:HTML TABLE TUT
Date Posted:10/28/2022 4:59 PMCopy HTML
In aimoo, all the STYLE stuff between "..." has to be on one line. On your desktop I don't think it matters.
OK, I tried copying the colorful demo post in item-2
You will have to then hit "enter" between all >< to get a decent editor (word processor) display. For Notepad++ use below method and hit REPLACE ALL, and CLOSE. Turn on WORD WRAP.
|
Niceguy2
|
#4
|
-
-
Rank:Diamond
- Score:329800
-
From:USA
- Register:01/12/2009 5:00 AM
|
Re:HTML TABLE TUT
Date Posted:10/29/2022 3:20 AMCopy HTML
|
Zenith
|
#5
|
-
-
Rank:Emerald
- Score:89070
-
From:Canada
- Register:07/31/2019 10:06 PM
|
Re:HTML TABLE TUT
Date Posted:10/29/2022 5:11 AMCopy HTML
Thanks, Joe.
I copied my CSS STYLE info sheet to below for easy reference.
Note that margin:0px auto; centers the item in its container.
Its the one that doesn't say what it means.
In post 3, the two sets of p's should look like this:
<p> </p> I forgot to use a corrupting code on the spaces. So, guess what ... the sucker made spaces!!!
|
Zenith
|
#6
|
-
-
Rank:Emerald
- Score:89070
-
From:Canada
- Register:07/31/2019 10:06 PM
|
Re:HTML TABLE TUT
Date Posted:10/29/2022 5:16 AMCopy HTML
INLINE CSS:One important factor in the forumotion and aimoo editors is that all CSS code must
appear on one unbroken line. Browsers other than Mozilla CHANGE THE CODE to something
that the site editor cannot fix to suit itself. IE is a programmer's nightmare,
by the way, and always needs a fix in practically any code language.
===============================================
The inline CSS code I use mainly is as follows:
===============================================
width:400px; ... width can be auto
height:500px; ... seldom required
border:8px solid #663300; ... usually a thin outer line ... see below for options
margin:0px auto; ... this centers the object (table) in its container (page)
text-align:center; ... this centers the text or image within the container (td)
font-size:28px; ... 28 is huge, normal is about 14
line-height: 28px; ... use 1px with images or you get blank space underneath
font-weight:900; ... 900 is maximum bold, normal 600
color:#663300; ... this pertains to font ... see chart link at bottom
padding: 0px; ... space around inside of a cell (td) and its content
-------------
NOTE:border-spacing ... other info is below re position, type, color, etc ...
border-spacing:25px; ... background color or image is located in here
background-color:#FFFFCC;
background-image:url('http://myhost.com/htmltiles/bunny-tile.jpg');
NOTE: background-image takes precedence over background-color
background-size:100% 100%; ... stretches image to fill box
background-repeat:no-repeat; ... see following ...
-----------
repeat The background image is repeated both vertically and horizontally ...
The last image will be clipped if it does not fit. This is default
repeat-x The background image is repeated only horizontally
repeat-y The background image is repeated only vertically
no-repeat The background-image is not repeated. The image will only be shown once
space The background-image is repeated as much as possible without clipping.
The first and last images are pinned to either side of the element,
and whitespace is distributed evenly between the images
round The background-image is repeated and squished or stretched to fill
the space (no gaps)
initial Sets this property to its default value.
inherit Inherits this property from its parent element
----------
border: is a short form which includes
border-width:
border-style:
border-color:
Some browsers will split the borders into:
border-left:
border-top:
border-right:
border-bottom:
border styles can be:
solid .. used by Dave often, 5 to 10px wide
double .. used by Dave often, 10 to 20px wide
dotted .. seldom used by Dave
dashed .. seldom used by Dave
groove .. color is much lighter in Firefox
ridge .. color is much lighter in Firefox .. used by Dave once in a while
inset .. color is much lighter in Firefox
outset .. color is much lighter in Firefox
none .. seldom used by Dave
hidden .. seldom used by Dave
border colors can be:
name - specify a color name, like "red"
Hex - specify a hex value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
transparent
border-radius:10px; ... used to add rounded corners to a box (td)
Color chart at: https://www.w3schools.com/colors/colors_picker.asp
font-family:
These can be listed in order of preference, with separating commas.
Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Sans-serif
Serif
Times New Roman
Trebuchet MS
Verdana
CONCEIVE, BELIEVE, ACHIEVE!
|
Copyright © 2000- Aimoo Free Forum All rights reserved.