HTMLx | HTMLx2 | HTMLx3 | HTMLx4 | CSSx1 | Image Garden | Photo Sandbox |
HTMLx[]
jnnb 0=∞=1
tables[]
padding and spacing[]
Without cellpadding:
First | Row |
Second | Row |
With cellpadding:
First | Row |
Second | Row |
Without cellspacing:
First | Row |
Second | Row |
With cellspacing:
First | Row |
Second | Row |
===tag inside table===
<IMG SRC="picture\sharls\SHARLS.JPG" height=100 width=125 border=5 HSPACE="50">
This is another paragraph |
This cell contains a table:
|
||||
This cell contains a list
|
HELLO |
headings in a table[]
cells spanning >1 row/column[]
Cell that spans two columns:
Name | Telephone | |
---|---|---|
Bill Gates | 555 77 854 | 555 77 855 |
Cell that spans two rows:
First Name: | Bill Gates |
---|---|
Telephone: | 555 77 854 |
555 77 855 |
[]
100 | 200 | 300 |
400 | 500 | 600 |
Table headers:
Name | Telephone | Telephone |
---|---|---|
Bill Gates | 555 77 854 | 555 77 855 |
Vertical headers:
First Name: | Bill Gates |
---|---|
Telephone: | 555 77 854 |
Telephone: | 555 77 855 |
background & color[]
A background color:
First | Row |
Second | Row |
A background image:
First | Row |
Second | Row |
background/image in cell[]
Cell backgrounds:
First | Row |
Second | Row |
align content in cell[]
Money spent on.... | January | February |
---|---|---|
Clothes | $241.10 | $50.20 |
Make-Up | $30.00 | $44.45 |
Food | $730.40 | $650.00 |
Sum | $1001.50 | $744.65 |
HTML Layout - Using Tables
One very common practice with HTML, is to use HTML tables to format the layout of an HTML page.
A part of this page is formatted with two columns, like a newspaper page.
|
An HTML <table> is used to divide a part of this Web page into two columns.
This text is displayed in the right column. The trick is to use a table without borders, and maybe a little extra cell-padding. No matter how much text you add to this page, it will stay inside its column borders. |
Same Layout - Color Added
One very common practice with HTML, is to use HTML tables to format the layout of an HTML page.
A part of this page is formatted with two columns, like a newspaper page.
|
An HTML <table> is used to divide a part of this Web page into two columns.
This text is displayed in the right column. The trick is to use a table without borders, and maybe a little extra cell-padding. No matter how much text you add to this page, it will stay inside its column borders. |
Source code[]
{| border="1" cellpadding="5" cellspacing="0" align="center" |+'''An example table''' |- ! style="background:#efefef;" | First header ! colspan="2" style="background:#ffdead;" | Second header |- | upper left | | rowspan=2 style="border-bottom:3px solid grey;" valign="top" | right side |- | style="border-bottom:3px solid grey;" | lower left | style="border-bottom:3px solid grey;" | lower middle |- | colspan="3" align="center" | {| border="0" |+''A table in a table'' |- | align="center" width="150px" | [[Image:wiki.png]] | align="center" width="150px" | [[Image:wiki.png]] |- | align="center" colspan="2" style="border-top:1px solid red; border-right:1px solid red; border-bottom:2px solid red; border-left:1px solid red;" | Two PeaceWiki logos |} |}
Appearance[]
An example table First header Second header upper left right side
lower left lower middle
A table in a table Two PeaceWiki logos