Did you find this useful?
Socialize it today.


HTML Tables, Rows, Columns, and Cells

Friday, February 17, 2012

HTML Tables can be used to arrange content on a web page. In the past, using tables was the only practical way to achieve a custom page layout. In today's web page development, you have alternatives such as by using div Elements and CSS. However, many web developers still prefer to use tables for customizing the layout of their pages. Tables may seem difficult at first, but after working through this tutorial and some practice, you will quickly become familiarized with them.

The table Element

A table is divided into rows (<tr> element), and each row is divided into cells (<td> element). The <td> element is used to store "table data". A <td> element can contain text and other HTML elemnets such as links, images, and even other tables. Here is an example of a basic table.

<table>
 <tr>
  <td>Cell 1A</td>
  <td>Cell 1B</td>
 </tr>
 <tr>
  <td>Cell 2A</td>
  <td>Cell 2B</td>
 </tr>
</table>

Cell 1ACell 1B
Cell 2ACell 2B


Table Headers

Table headers can be used if you want to specify that a row in the table should be treated as a header. Header information in a table is defined with the <th> element. Modern browsers apply different formatting to your header elements. Alternatively, you can use CSS to apply your own custom settings.

<table>
 <tr>
  <th>Col A</th>
  <th>Col B</th>
 </th>
 <tr>
  <td>Cell 1A</td>
  <td>Cell 1B</td>
 </tr>
 <tr>
  <td>Cell 2A</td>
  <td>Cell 2B</td>
 </tr>
</table>

Col ACol B
Cell 1ACell 1B
Cell 2ACell 2B


Spanning rows and cells

Just as you would with a spreadsheet document, there will be instances where you need to span multiple rows or cells. You can do so by using the rowspan and colspan attributes in the <td> element. Here is an example.

<table>
<tr>
<th>Col A</th>
<th>Col B</th>
<th>Col C</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td></tr>
</table>
 
Col A Col B Col C
Row 1 Cell 1 Row 1 Cell 2Row 1 Cell 3
Row 2 Cell 2Row 2 Cell 3
Row 3 Cell 1


Padding and Spacing

You can use the cellpadding and cellspacing attributes to adjust the white space on your tables. Although using CSS is the preferred method. Spacing will affect the distance between the cells, while padding affects the distance between cell borders and the content within the cell. Here are some examples. The first table uses only cellpadding. The second table uses only cellspacing. The third table uses both cellpadding and cellspacing.

<table border="1" cellpadding="10" cellspacing="10">
 <tr>
  <td>Cell 1A</td>
  <td>Cell 1B</td>
 </tr>
 <tr>
  <td>Cell 2A</td>
  <td>Cell 2B</td>
 </tr>
</table>



cellpadding

cellspacing

cellpadding and cellspacing

Table Captions

The <caption> element defines a table caption. This element must be inserted immediately after the starting <table> tag. You can specify only one caption per table. By default, the table caption will be center-aligned above a table. However, you can use the CSS properties "text-align" and "caption-side" can be used to align and place the caption. Table captions are supported by all modern browsers. Here is an example.

<table>
<caption>Table #1</caption>  <tr>
  <td>Cell 1A</td>
  <td>Cell 1B</td>
 </tr>
 <tr>
  <td>Cell 2A</td>
  <td>Cell 2B</td>
 </tr>
</table>

Table #1
Cell 1ACell 1B
Cell 2ACell 2B


Grouping Columns Together

The <colgroup> and <col> elements can be used to group columns in a table for formatting. This is helpful when you need to format one or more columns rather than applying a style for each cell in each row. Here is an example.

<table>
<colgroup style="background-color:yellow;"></colgroup>
<colgroup span="2" style="background-color:green;"></colgroup>
 <tr>
  <td>Cell 1A</td>
  <td>Cell 1B</td>
  <td>Cell 1C</td>
 </tr>
 <tr>
  <td>Cell 2A</td>
  <td>Cell 2B</td>
  <td>Cell 2C</td>
 </tr>
</table>

Cell 1ACell 1BCell 1C
Cell 2ACell 2BCell 2C

<table>
<colgroup>
<col style="background-color:yellow;" />
<col span="2" style="background-color:green;"/>
</colgroup>
 <tr>
  <td>Cell 1A</td>
  <td>Cell 1B</td>
  <td>Cell 1C</td>
 </tr>
 <tr>
  <td>Cell 2A</td>
  <td>Cell 2B</td>
  <td>Cell 2C</td>
 </tr>
</table>

Cell 1ACell 1BCell 1C
Cell 2ACell 2BCell 2C


Table Headers, Body, and Footer

The <thead>, <tbody>, and <tfoot> elements can be used to group rows within a table, much like the colgroup and col elements. These elements establish a header, body, and footer section in your table. Browsers can use these elements to and treat each of these sections independently. Using these elements is also very helpful when formatting rows. Here is an example of its use.

<table>
<thead style="color:red;background-color:yellow;">
 <tr>
  <td>Product</td>
  <td>Cost</td>
 </tr>
</thead>
<tbody style="color:blue;">
 <tr>
  <td>Book</td>
  <td>$20.00</td>
 </tr>
 <tr>
  <td>Magazine</td>
  <td>$5.00</td>
 </tr>
</tbody>
<tfoot style="color:green;">
 <tr>
  <td>Total</td>
  <td>$25.00</td>
 </tr>
</tfoot>
</table>

ProductCost
Book$20.00
Magazine$5.00
Total$25.00


Tables appear to be a bit complicated when compared to other HTML elements. However, they are still very useful when you need to display data in an organized fashion.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Creating Web Pages Simplified HTML CSS: The Complete Reference HTML CSS and JavaScript Editor