Tables HTML

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.

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

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

How it looks in a browser:

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

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:

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

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

How it looks in a browser:

Heading	Another Heading
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers.

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

How it looks in a browser:

row 1, cell 1	row 1, cell 2
row 2, cell 1

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:

<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>&nbsp;</td>  </tr> 
 </table>

How it looks in a browser:

row 1, cell 1	row 1, cell 2
row 2, cell 1

<h4>This table has no borders:</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

<h4>And this table has no borders:</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

This table has no borders:

100	200	300
400	500	600

And this table has no borders:

100	200	300
400	500	600

Cell padding
This example demonstrates how to use cellpadding to create more white space between the cell content and its borders.

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

Without cellpadding:

First	Row
Second	Row

With cellpadding:

First	Row
Second	Row

Cell spacing
This example demonstrates how to use cellspacing to increase the distance between the cells.

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

Without cellspacing:

First	Row
Second	Row

With cellspacing:

First	Row
Second	Row

Add a background color or a background image to a table
This example demonstrates how to add a background to a table.

<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="background.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

A background color:

First	Row
Second	Row

A background image:

First	Row
Second	Row

Add a background color or a background image to a table cell
This example demonstrates how to add a background to one or more table cells.

<h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="background.jpg">
Second</td>
<td>Row</td>
</tr>
</table>

Cell backgrounds:

First	Row
Second	Row

Align the content in a table cell
This example demonstrates how to use the "align" attribute to align the content of cells, to create a "nice-looking" table.

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

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

http://www.w3schools.com/