Reply Topic

Post New Reply

Topic title：
Allow Signature
Reply Content：(max image size: 3MB; max file size: 20MB; max video size: 100MB)

Author	Content

Zenith

Date Posted：10/28/2022 4:56 PM

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:

Zenith

Re：Reply Topic

Date Posted：10/28/2022 4:57 PM

INNER TABLE

colm-11	colm-12	colm-13
colm-21	colm-22	colm-23

Zenith

Re：Reply Topic

Date Posted：10/28/2022 4:58 PM

<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>

Zenith

Re：Reply Topic

Date Posted：10/28/2022 4:59 PM

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

Re：Reply Topic

Date Posted：10/29/2022 3:20 AM

Zenith

Re：Reply Topic

Date Posted：10/29/2022 5:11 AM

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>&nbsp;</p>

I forgot to use a corrupting code on the spaces. So, guess what ... the sucker made spaces!!!

Zenith

Re：Reply Topic

Date Posted：10/29/2022 5:16 AM

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

Skin by SandhillsDebby - Elements from DivaAmyMarie.blogspot.com