You may want to consider using HTML tables in your website. In addition to creating HTML tables to present data in rows and columns, you can also create HTML tables to organize information on your web page. The process of creating an HTML table is similar to the process that you used to create your web page and any elements that you may have already included in your page, such as links or frames. Coding HTML tables into your web page is fairly easy since you need only understand a few basic table codes.

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells.

Creating a basic table

The basic structure of an HTML table consists of the following tags:

  • Table tags:     <TABLE>   </TABLE>
  • Row tags:      <TR>   </TR>
  • Cell tags:       <TD>   </TD>

Constructing an HTML table consists of describing the table between the beginning table tag, <TABLE>, and the ending table table tag, </TABLE>.

Between these tags, you then construct each row and each cell in the row. To do this, you would first start the row with the beginning row tag, <TR>, and then build the row by creating each cell with the beginning cell tag, <TD>, adding the data for that cell, and then closing the cell with the ending cell tag, </TD>.

When you finish all of the cells for a row, you would then close the row with the ending row tag, </TR>.Then, for each new row, you would repeat the process of beginning the row, building each cell in the row, and closing the row.

Example 1

<TABLE>
<TR>
<TD>Data 1</TD>
<TD>Data 2</TD>
</TR>

<TR>
<TD>Data 3</TD>
<TD>Data 4</TD>
</TR>

<TR>
<TD>Data 5</TD>
<TD>Data 6</TD>
</TR>
</TABLE>

Example 1

The following table is an example of a basic table with three rows and two columns of data. The codes that generated the table look like this:

 

Data 1 Data 2
Data 3 Data 4
Data 5 Data 6

An HTML Table with a Border Attribute

Example 2

<table border=”1″ style=”width:100%”>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>

If you do not specify a border for the table, it will be displayed without borders. A border can be added using the border attribute: See Example 2

HTML Table Headings

Example 3

<table style=”width:100%”>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Table headings are defined with the <th> tag. By default, all major browsers display table headings as bold and centered: Example 3

Table Cells that Span Many Columns

Example 4

<table style=”width:100%”>
<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>

To make a cell span more than one column, use the colspan attribute: Example 4

 

Table Cells that Span Many Rows

Example 5

<table style=”width:100%”>
<tr>
<th>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>

To make a cell span more than one row, use the rowspan attribute: Example 5

 

An HTML Table With a Caption

Example 6

<table style=”width:100%”>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

To add a caption to a table, use the <caption> tag: Example 6

 

HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

 
Summary

  • Use the HTML <table> element to define a table
  • Use the HTML <tr> element to define a table row
  • Use the HTML <td> element to define a table data
  • Use the HTML <th> element to define a table heading
  • Use the HTML <caption> element to define a table caption
  • Use the CSS border property to define a border
  • Use the CSS border-collapse property to collapse cell borders
  • Use the CSS padding property to add padding to cells
  • Use the CSS text-align property to align cell text
  • Use the CSS border-spacing property to set the spacing between cells
  • Use the colspan attribute to make a cell span many columns
  • Use the rowspan attribute to make a cell span many rows
  • Use the id attribute to uniquely define one table