Html Table Tutorial

html tables are used to organize your data in a way that tags such as <p>(paragraph tag) cannot.
In this tutorial we will cover all the table elements:

Page Navigation:

• Introduction - Simple four celled table
• Table Headings (the th tag)
• Cell padding and spacing
• thead, tbody and tfoot tags
• Html Table Tutorial - Part 2

Introduction - Simple four celled table

Tables have row and column tags; <tr> and <td>. The <tr> tag represents a "table row" and the <td> tag represents "table data". The example below shows the order of the tags and where you should insert your data.

<table border="1">     table - table tags

<tr>                   tr - Table row
<td>                   td - Table data cell
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>

Further explanation

<table border="1">
The table tag must include the 'border="1"' attribute, otherwise the table will show no borders.

<tr>
The <tr> tag is the table row(s). If you have one <tr> tag it will produce one row, if you have two <tr> tags it will produce two rows and so on. The <tr> tag must be closed and include the <td> tag.

<td>
The <td> tag is where all the displayed data gets placed. If you have one <td> tag in a <tr> tag, it will produce one cell for that row. If you have two <td> tags it will produce two cells for that row and so on. There can be other html tags placed in the <td> tag and must also be closed.

Table headings

The <th> tag is a "table heading". This tag acts like a <td> tag, but the text becomes bold.

<table border="1">

<tr>
<th>                  th - Table heading
heading 1
</th>
<th>
heading 2
</th>
</tr>
    
<tr>                   
<td>                  
Row 1, cell 1
</td>
<td>
Row 1, cell 2
</td>
</tr>

</table>

Cell padding and spacing

Cell padding:
Cell padding is the amount of space between the content and the cell border. The attribute is placed as shown below.

<table border="1" cellpadding="20">
    
<tr>                   
<td>                  
Cell
</td>
<td>
Padding
</td>
</tr>

</table>

Cell spacing:
Cell spacing is the amount of space between borders. The attribute is placed as shown below.

<table border="1" cellspacing="20">
    
<tr>                   
<td>                  
Cell
</td>
<td>
Spacing
</td>
</tr>

</table>

thead, tbody and tfoot

The thead, tbody and tfoot tags are used in a table to group rows. thead, tbody and tfoot are also known as table header , table body and table footer. These tags must be placed in the following order; thead, tfoot then tbody.

<table border="1">

<thead>
<tr>
<th>
Table Header
</th>
</tr>
</thead>
  
<tfoot>
<tr>
<td>
Table Footer
</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>
Table Body
</td>
</tr>
</tbody>

</table>

You have now finished Part 1 of the html table tutorial please proceed to html table tutorial - part two.