HTML - Tables

An HTML table is an element comprised of table rows and columns, much like you'd see when working with an application such as Excel. Tables are container elements, and their sole purpose is to house other HTML elements and arrange them in a tabular fashion -- row by row, column by column.

Tables may seem difficult at first, but after working through this lesson, you'll see that they aren't so horrible. A table element consists of three different HTML tags including the <table> tag, <tr> (table rows), and the <td> (table columns) tags.

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

Basic HTML Table Layout

We've adjusted the formatting of the code by adding additional spaces before some of the table elements, but this has no bearing on the rendering of the element. It simply helps keep track of each tag/element and helps us ensure we don't miss an opening or closing tag which would prevent our table element from rendering correctly. We've also added a border attribute to ensure the table cells/rows are more visible to our readers.

Content elements like HTML lists, images, and even other table elements can be placed inside each table cell. Doing so aligns the elements in a tabular fashion and provides structure.

HTML - Table Rows & Table Columns

A table can contain an infinite number of table rows. Each table row is essentially a table element itself, with an opening and closing tag (<tr> </tr>). Table columns are also considered child elements of HTML tables, and like table rows, an HTML table may contain an infinite number of table data cells (<td> <tr>).

Table rows and columns are container elements that house other HTML elements such as text links, images, and lists, as we've seen in previous examples. Below, we've applied a background color to the table example in order to help distinguish the different table elements.

HTML - Tables Spanning Multiple Rows and Cells

Use rowspan to span multiple rows merging together table rows and colspan to span across multiple columns.

<table border="1">
  <tr>
    <td><b>Column 1</b></td>
    <td><b>Column 2</b></td>
    <td><b>Column 3</b></td>
  </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>

HTML Colspan and Rowspan Result

Cell Padding and Spacing

With the cellpadding and cellspacing attributes, you will be able to adjust the spacing between table cells. Setting the cellpadding attribute determines how much space will exist between a table cell border and the elements contained within it, whereas cellspacing determines how much space will exist between each table cell. Color has been added to the table below to emphasize these attributes.

<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">
  <tr>
    <td><b>Column 1</b></td>
    <td><b>Column 2</b></td>
  </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>

HTML Cellspacing and Padding

And now we will change the cellpadding of the table and remove the cellspacing from the previous example. This should clearly demonstrate the difference between cellpadding and cellspacing.

<table border="1" cellpadding="10" bgcolor="rgb(0,255,0)">
  <tr>
    <td><b>Column 1</b></td>
    <td><b>Column 2</b></td>
  </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>

HTML Cell Pads

The value you specify for padding and spacing is interpreted by the browser as a pixel value. So a value of 10 is simply 10 pixels wide. Most HTML attributes that use numeric values for their measurements represent a pixel value.