Symon
|
TablesFirst off you have to your allow these HTML tags in admin panel --general config-- allow HTML (also make sure html is on in your profile and any member that wishes to see the table)
table,tr,th,td
-------------------------------------------------------------------------------------
Table Tags
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
=----------------------------------------------------------------------------------
TIP
To avoid the table being shown half way down the page make sure that there are no breaks in the code for example:
Insted of this
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Make it like this
<table border="1"><tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>
Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
Example 1
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
See below to see how they will look
--------------------------------------------------------------------------------
Tables and the Border Attribute
If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:
Example 2
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
--------------------------------------------------------------------------------
Headings in a Table
Headings in a table are defined with the <th> tag.
Example 3
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
--------------------------------------------------------------------------------
Empty Cells in a Table
Table cells with no content are not displayed very well in most browsers.
Example 4 a
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border).
To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible:
Example 4 b
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td> </td>
</tr>
</table>
<html>
<body>
-------------------------------------------------------------------------------------
This table has a caption,and a thick border:
Example 5
<table border="6">
<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>
</body>
</html>
--------------------------------------------------------------------------------
Cell that spans two columns:
Example 6
<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>
Cell that spans two rows:
<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 a table
Example 7
<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>
--------------------------------------------------------------------------------
Without cellpadding:
Example 8
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
With cellpadding:
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
-------------------------------------------------------------------------------
Without cellspacing:
Example 9
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
With cellspacing:
<table border="1"
cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
--------------------------------------------------------------------------------
A background color:
Example 10
<table border="1"
bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
A background image:
<table border="1"
background=http://link to the image>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
-------------------------------------------------------------------------------
Cell backgrounds:
Example 11
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background=http://link to the image>
Second</td>
<td>Row</td>
</tr>
</table>
-------------------------------------------------------------------------------
Align the content in a table cell
Example 12
<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>
--------------------------------------------------------------------------------
Basic Notes - Useful Tips
The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML.
|
Symon
|
Example 1
| row 1, cell 1 | row 1, cell 2 | | row 2, cell 1 | row 2, cell 2 |
Example 2
Table with borders
| Row 1, cell 1 | Row 1, cell 2 |
Example 3
Headings in a Table
| Heading | Another Heading |
|---|
| row 1, cell 1 | row 1, cell 2 | | row 2, cell 1 | row 2, cell 2 |
Example 4 a
Empty Cells in a Table
| row 1, cell 1 | row 1, cell 2 | | row 2, cell 1 | |
Example 4 b
| row 1, cell 1 | row 1, cell 2 | | row 2, cell 1 | |
Example 5
Table with a Caption
My Caption| 100 | 200 | 300 | | 400 | 500 | 600 |
Example 6
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 |
Example 7
Tags inside a table
This is a paragraph This is another paragraph | This cell contains a table: | | This cell contains a list | HELLO |
Example 8
Without cellpadding:
With cellpadding:
Example 9
Without cellspacing:
With cellspacing:
Example 10
A background color:
A background image:
Example 11
Cell backgrounds:
Example 12
Align the content in a table 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 |
|---|
|
|
|
|