<html> Tables

Tables are a very powerful tool in html and can be used in many ways they were originally developed to communicate tabular data, scientific and academic data.
Today tables are used for many things such as page layout and design, on this page we will cover the basics of tables.

The code example of an html table below has all its parts labeled so you can clearly see them.
To see the example rendered in a browser use this link table parts.

<table border="1">
<caption>
Table Caption
</caption>
<thead>
<tr>
  <td colspan="2">
Table Header
   </td>
    </tr>
  </thead>
<tfoot>
<tr>
  <td colspan="2">
Table Footer
   </td>
    </tr>
</tfoot>
<tbody>
<tr>
  <th>
Header Cell 1
   </th>
  <th>
Header Cell 2
   </th>
    </tr>
<tr>
  <td>
Body Cell 1
   </td>
  <td>
Body Cell 2
   </td>
    </tr>
  </tbody>
</table>

Many of the parts of an html table are actually optional, and you only need to delimit the whole table itself with the table tags,  these are the table tags  <table> </table>
To define the rows of the table we use the table row tags  they look like this <tr> </tr>.
The columns of the table are defined with the table data tags  they look like this <td> </td>
The example below shows the code for a table using the minimum number of tags  required for a basic table.
To see the example rendered in a browser use this link basic table.

The cells of an html table expand to accomodate their contents, the table itself expands to the limit of it's container object, whether it's a browser window,  a sized frame, or another table, the contents of the cells will wrap.
You can manually size the table to either constrain the table or fill a space with the table itself.
This is done by applying the width attribute to the <table> tag,  to set the size of the table, either in pixels, centimeters or as a percentage of the containing object.
As well as specifying the width of the table itself you can also apply the width attribute within these other table tags  <th> and the <td> as well as the <col> and the <colgroup> tags  too.
If the specified width exceeds the table's container object, and the container is scroll–enabled, ie a browser window,  then horizontal scroll bars will appear to allow the user to scroll and view the entire table and it's contents.

The table tag also supports the align attribute, this controls where the table is positioned within the containing object/element.
The align attribute supports left right center values, the tables position is adjusted using the setting of this attribute.
This attribute will have no visible effect on a table that occupies the full width of it's container.

The horizontal elements of a table grid are table rows and they are delimited by the table row tags which look like this <tr> </tr>.
The row ending tag </tr> is optional, but for clarity in your code you should always include the appropriate "ending" tags in your code.

You can find more information at the W3Schools web site on the tr tags.

In a table the individual cells of the table are the elements that actually hold data, you use the <td> </td> tags to delimit the cells or columns in an html table.
Always use the appropriate </td> "closing" tag for each cell.

You can find more information at the W3Schools web site on the td tags.

There are two options available here they are, spacing and padding that you can employ to control your html tables.
Cell spacing refers to the spaces between the actual cells in the table, and cell padding refers to the space between the cell contents and the border of the cell itself.
The cellspacing attribute is used to control cell spacing, it can be specified in pixels or percentages.
When a percentage is specified the browser uses half of the percentage for each half of the cell it is applied to.
The cellpadding attribute is used to control the cells padding, and is also specified in pixels or a percentage.

There are many ways that we can configure the borders around a table and also in between the cells themselves, this section will look at the basics of table borders.
To configure the outside border of the <table> tag you can use the border attribute, the borders value is specified in pixels, the default value is 0, or no border.
In the code example below the table has a 1 pixel border, to make the border wider we only need to change the border attribute value to a higher value.
To see the example below rendered in a browser and two other tables with different sized borders use this link borders

In html borders can be a very useful troubleshooting tool, if you have to deal with problems with your tables.
If you do encounter a problem with your tables it is always a good idea to turn on the borders and this will help you to visualize the problem and determin what is wrong.
It is possible to nest tables within one another, this is a very popular way to layout a page, if you do have problems with nested tables you can use the borders to help narrow down the problem.

To span data cells across multiple columns and rows we use the colspan and the rowspan attributes.
This type of spanning is used to provide column or row headings and for groups of columns too.
In the code example below a rowspan attribute has been applied to the first <td> tag of the table, so that it spans the two cells to it's right.
To see the example rendered in a browser use this link rowspan

In the code example below a colspan attribute has been applied to the first <td> tag of the table and this time the cell spans the two cells below it.
To see the example rendered in a browser use this link colspan

In the code example below both the colspan attribute has been applied to the first cells <td> tag so that it spans the 3 cells below it, and the rowspan attribute has been applied to the second cells <td> tag so that it spans the 2 cells to its right.
To see the example rendered in a browser use this link colspan & rowspan

<table border="1">
<tr>
  <td colspan"3">
Cell One
   </td>
    </tr>
<tr>
  <td rowspan="2">
Cell Two
   </td>
  <td>
Cell Three
   </td>
  <td>
Cell Four
   </td>
    </tr>
<tr>
  <td>
Cell Five
   </td>
  <td>
Cell Six
   </td>
    </tr>
</table>

It is possible to nest one table within another table in html, just as you can with lists, and they can be used as the foundations for web page layouts, which can be quite complex.
One of most popular types of layout is the floating page which I have used on this site, the contents of the page are contained within two tables, the outer table has a blue border and the inner table contains the contents of the page.
The outer table that contains the nested table only has 1 data cell to contain the nested table, but the inner table can contain as many cells as are required.
In the code example below we have two basic tables with 1 data cell in each table.
The outer table has a 4 pixel border and the nested inner table has a solid black 1 pixel border. To see the example rendered in a browser use this link nested table

<table border="4px">
<tr>
  <td>
<table border="1px">
<tr>
  <td>
This text is contained by
the data cell of the
inner or nested table...
   </td>
    </tr>
</table>
   </td>
    </tr>
</table>

html Tables

html Table parts

Rows and cells

Cell spacing and padding

borders

Rowspan and colspan

Nesting tables