joeheader16
friendsoffortiesfive Aimoo Forum List | Ticket | Today | Member | Search | Who's On | Help | Sign In | |
friendsoffortiesfive > General > General Discussion Go to subcategory:
Post New Topic Reply
Author Content
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

 

INNER TABLE

 

colm-11colm-12colm-13
colm-21colm-22colm-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>&nbsp;</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!
Post New Topic Reply
Copyright © 2000- Aimoo Free Forum All rights reserved.
Skin by SandhillsDebby - Elements from DivaAmyMarie.blogspot.com