mNo edit summary |
mNo edit summary |
||
Line 4: | Line 4: | ||
0=<font size=5>∞</font>=1 |
0=<font size=5>∞</font>=1 |
||
+ | |||
+ | ==tables== |
||
+ | |||
+ | <h4>One column:</h4> |
||
+ | <table border="1"> |
||
+ | <tr> |
||
+ | <td>100</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>One row and three columns:</h4> |
||
+ | <table border="1"> |
||
+ | <tr> |
||
+ | <td>100</td> |
||
+ | <td>200</td> |
||
+ | <td>300</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>Two rows and three columns:</h4> |
||
+ | <table border="1"> |
||
+ | <tr> |
||
+ | <td>100</td> |
||
+ | <td>200</td> |
||
+ | <td>300</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>400</td> |
||
+ | <td>500</td> |
||
+ | <td>600</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <p> |
||
+ | Each table starts with a table tag. |
||
+ | Each table row starts with a tr tag. |
||
+ | Each table data starts with a td tag. |
||
+ | </p> |
||
+ | |||
+ | |||
+ | ==table borders== |
||
+ | |||
+ | |||
+ | |||
+ | <h4>Normal border:</h4> |
||
+ | <table border="1"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>Thick border:</h4> |
||
+ | <table border="8"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>Very thick border:</h4> |
||
+ | <table border="15"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | ==no borders== |
||
+ | |||
+ | <h4>No borders:</h4> |
||
+ | <table> |
||
+ | <tr> |
||
+ | <td>100</td> |
||
+ | <td>200</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>300</td> |
||
+ | <td>400</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>And this table has no borders:</h4> |
||
+ | <table border="0"> |
||
+ | <tr> |
||
+ | <td>100</td> |
||
+ | <td>200</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>300</td> |
||
+ | <td>400</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | ==headings== |
||
+ | |||
+ | <h4>Table headers:</h4> |
||
+ | <table border="1"> |
||
+ | <tr> |
||
+ | <th>Name</th> |
||
+ | <th>Telephone</th> |
||
+ | <th>Telephone</th> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Bill Gates</td> |
||
+ | <td>555 77 854</td> |
||
+ | <td>555 77 855</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>Vertical headers:</h4> |
||
+ | <table border="1"> |
||
+ | <tr> |
||
+ | <th>First Name:</th> |
||
+ | <td>Bill Gates</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <th>Telephone:</th> |
||
+ | <td>555 77 854</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <th>Telephone:</th> |
||
+ | <td>555 77 855</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | ==empty cells== |
||
+ | |||
+ | <table border="1"> |
||
+ | <tr> |
||
+ | <td>Some text</td> |
||
+ | <td>Some text</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td></td> |
||
+ | <td>Some text</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <p> |
||
+ | As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border. |
||
+ | </p> |
||
+ | |||
+ | <p> |
||
+ | The trick is to insert a no-breaking space in the cell. |
||
+ | </p> |
||
+ | |||
+ | <p> |
||
+ | No-breaking space is a character entity. If you don't know what a character entity is, read the chapter about it. |
||
+ | </p> |
||
+ | |||
+ | <p> |
||
+ | The no-breaking space entity starts with an ampersand ("&"), |
||
+ | then the letters "nbsp", and ends with a semicolon (";") |
||
+ | </p> |
||
+ | |||
+ | ==caption== |
||
+ | |||
+ | <h4>This table has a caption:</h4> |
||
+ | <table border="1"> |
||
+ | <caption>My Caption</caption> |
||
+ | <tr> |
||
+ | <td>100</td> |
||
+ | <td>200</td> |
||
+ | <td>300</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>400</td> |
||
+ | <td>500</td> |
||
+ | <td>600</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | --span more than one row/column== |
||
+ | |||
+ | <h4>Cell that spans two columns:</h4> |
||
+ | <table border="1"> |
||
+ | <tr> |
||
+ | <th>Name</th> |
||
+ | <th colspan="2">Telephone</th> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Bill Gates</td> |
||
+ | <td>555 77 854</td> |
||
+ | <td>555 77 855</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>Cell that spans two rows:</h4> |
||
+ | <table border="1"> |
||
+ | <tr> |
||
+ | <th>First Name:</th> |
||
+ | <td>Bill Gates</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <th rowspan="2">Telephone:</th> |
||
+ | <td>555 77 854</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>555 77 855</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | |||
+ | ==tags inside of tables== |
||
+ | |||
+ | |||
+ | <table border="1"> |
||
+ | <tr> |
||
+ | <td> |
||
+ | <p>This is a paragraph</p> |
||
+ | <p>This is another paragraph</p> |
||
+ | </td> |
||
+ | <td>This cell contains a table: |
||
+ | <table border="1"> |
||
+ | <tr> |
||
+ | <td>A</td> |
||
+ | <td>B</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>C</td> |
||
+ | <td>D</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | </td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>This cell contains a list |
||
+ | <ul> |
||
+ | <li>apples</li> |
||
+ | <li>bananas</li> |
||
+ | <li>pineapples</li> |
||
+ | </ul> |
||
+ | </td> |
||
+ | <td>HELLO</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | |||
+ | |||
+ | ===cell padding== |
||
+ | |||
+ | |||
+ | |||
+ | <h4>Without cellpadding:</h4> |
||
+ | <table border="1"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>With cellpadding:</h4> |
||
+ | <table border="1" |
||
+ | cellpadding="10"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | |||
+ | |||
+ | ==cell spacing== |
||
+ | |||
+ | |||
+ | |||
+ | <h4>Without cellspacing:</h4> |
||
+ | <table border="1"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>With cellspacing:</h4> |
||
+ | <table border="1" |
||
+ | cellspacing="10"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ==background color and image== |
||
+ | |||
+ | |||
+ | |||
+ | <h4>A background color:</h4> |
||
+ | <table border="1" |
||
+ | bgcolor="red"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>A background image:</h4> |
||
+ | <table border="1" |
||
+ | background="bgdesert.jpg"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | |||
+ | ==cell color/bckground== |
||
+ | |||
+ | <h4>Cell backgrounds:</h4> |
||
+ | <table border="1"> |
||
+ | <tr> |
||
+ | <td bgcolor="red">First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td |
||
+ | background="JB1.jpg"> |
||
+ | Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | ==align content== |
||
+ | |||
+ | <table width="400" border="1"> |
||
+ | <tr> |
||
+ | <th align="left">Money spent on....</th> |
||
+ | <th align="right">January</th> |
||
+ | <th align="right">February</th> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td align="left">Clothes</td> |
||
+ | <td align="right">$241.10</td> |
||
+ | <td align="right">$50.20</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td align="left">Make-Up</td> |
||
+ | <td align="right">$30.00</td> |
||
+ | <td align="right">$44.45</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td align="left">Food</td> |
||
+ | <td align="right">$730.40</td> |
||
+ | <td align="right">$650.00</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <th align="left">Sum</th> |
||
+ | <th align="right">$1001.50</th> |
||
+ | <th align="right">$744.65</th> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | ==frames== |
||
+ | |||
+ | |||
+ | <p> |
||
+ | If you see no frames around the tables in these examples, your browser is too old, or does not support it. |
||
+ | </p> |
||
+ | |||
+ | <h4>With frame="border":</h4> |
||
+ | <table frame="border"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>With frame="box":</h4> |
||
+ | <table frame="box"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>With frame="void":</h4> |
||
+ | <table frame="void"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>With frame="above":</h4> |
||
+ | <table frame="above"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>With frame="below":</h4> |
||
+ | <table frame="below"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>With frame="hsides":</h4> |
||
+ | <table frame="hsides"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>With frame="vsides":</h4> |
||
+ | <table frame="vsides"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>With frame="lhs":</h4> |
||
+ | <table frame="lhs"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | <h4>With frame="rhs":</h4> |
||
+ | <table frame="rhs"> |
||
+ | <tr> |
||
+ | <td>First</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | <tr> |
||
+ | <td>Second</td> |
||
+ | <td>Row</td> |
||
+ | </tr> |
||
+ | </table> |
||
+ | |||
+ | ==columns in a table== |
||
+ | |||
+ | This example shows a colgroup that has three columns of different widths: |
||
+ | |||
+ | <table border="1"> |
||
+ | <colgroup span="3"> |
||
+ | <col width="20"></col> |
||
+ | <col width="50"></col> |
||
+ | <col width="80"></col> |
||
+ | </colgroup> |
||
+ | <tr> |
||
+ | <td>1</td> |
||
+ | <td>2</td> |
||
+ | <td>3</td> |
||
+ | <td>4</td> |
||
+ | </tr> |
||
+ | </table> |
Revision as of 03:19, 27 December 2004
HTML experiment page
0=∞=1
tables
One column:
100 |
One row and three columns:
100 | 200 | 300 |
Two rows and three columns:
100 | 200 | 300 |
400 | 500 | 600 |
Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.
table borders
Normal border:
First | Row |
Second | Row |
Thick border:
First | Row |
Second | Row |
Very thick border:
First | Row |
Second | Row |
no borders
No borders:
100 | 200 |
300 | 400 |
And this table has no borders:
100 | 200 |
300 | 400 |
headings
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 |
empty cells
Some text | Some text |
Some text |
As you can see, one of the cells has no border. That is because it is empty. Try to insert a space in the cell. Still it has no border.
The trick is to insert a no-breaking space in the cell.
No-breaking space is a character entity. If you don't know what a character entity is, read the chapter about it.
The no-breaking space entity starts with an ampersand ("&"), then the letters "nbsp", and ends with a semicolon (";")
100 | 200 | 300 |
400 | 500 | 600 |
--span more than one 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 |
tags inside of tables
This is a paragraph This is another paragraph |
This cell contains a table:
|
||||
This cell contains a list
|
HELLO |
=cell padding
Without cellpadding:
First | Row |
Second | Row |
With cellpadding:
First | Row |
Second | Row |
cell spacing
Without cellspacing:
First | Row |
Second | Row |
With cellspacing:
First | Row |
Second | Row |
background color and image
A background color:
First | Row |
Second | Row |
A background image:
First | Row |
Second | Row |
cell color/bckground
Cell backgrounds:
First | Row |
Second | Row |
align content
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 |
frames
If you see no frames around the tables in these examples, your browser is too old, or does not support it.
With frame="border":
First | Row |
Second | Row |
With frame="box":
First | Row |
Second | Row |
With frame="void":
First | Row |
Second | Row |
With frame="above":
First | Row |
Second | Row |
With frame="below":
First | Row |
Second | Row |
With frame="hsides":
First | Row |
Second | Row |
With frame="vsides":
First | Row |
Second | Row |
With frame="lhs":
First | Row |
Second | Row |
With frame="rhs":
First | Row |
Second | Row |
columns in a table
This example shows a colgroup that has three columns of different widths:
<colgroup span="3"> <col width="20"></col> <col width="50"></col> <col width="80"></col> </colgroup>1 | 2 | 3 | 4 |