Today we’re going to talk about HTML Tables! Tables were created in May of 1996 as in update to HTML 2.0. Since then, tables were a way for us to layout our websites and/or information in a document. Frames became popular with HTML 3.0, HTML 3.2, and especially HTML 4.0. After Framesets fizzled out tables became the preferred method of website creation.

Now, websites are being created with intricate server side programs and CSS that will write HTML for you. Despite these improvements for website creation, if you just do a simple google search for a website, you’ll see that some are still made using tables. You can read all about the History of HTML by reading the wiki article on it.

Tables is a good starting point to understanding site layout and the flow of the page, so it’s still good to know!

Tables

Tables are defined by creating a <table> tag and then a <tr> and then a <td> So the order is as follows:

  1. table
  2. tr (table row)
  3. td (table cell)

The general syntax for tables is as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<html>
<head>
</head>
<body>
<table>
     <tr>
          <td>table cell</td>
          <td>table cell</td>
     </tr>
</table>
row 1 cell 1 row 1 cell 2
row 2 cell 1 row 2 cell 2

The example above in the form of HTML would be like the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

Border Attribute

The border attribute is an attribute that will display (or not display) a border around the <table>, <tr>, and <td> tags – basically around all elements of a table. If, for example, you wanted to create a table with no border then you would do the following:

1
2
3
4
5
6
7
8
9
10
11

<table border="0">
     <tr>
          <td></td>
          <td></td>
     </tr>
</table>

You can substitute the 0 for any integer that is wanted. Consider the table example we made before the Border Attribute title. That has a border=”1″.

row 1 cell 1 row 1 cell 2
row 2 cell 1 row 2 cell 2

This is the same table but with a border of 5.

Table Headings

Table Headings are defined by the use of <th> tags. These are usually used to title rows/columns in the table and are used in place of <td> to define the cell. Consider the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<table border="0">
     <tr> <!--Table headings-->
          <th>Table Heading</th>
          <th>Table Heading</th>
     </tr>
     <tr>
          <td>Table Cell</td>
          <td>Table Cell</td>
     </tr>
     <tr>
          <td>This is an example</td>
          <td>This is an example</td>
     </tr>
</table>

The code above would look like this:

Table Heading Table Heading
Table Cell Table Cell
This is an example This is an example

Cell Spanning

Sometimes you may need a single cell to span more than 1 column or row. For this we use the colspan and rowspan attributes on the td or th tags.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<table>
     <tr>
          <th rowspan="2">Name</th>
          <th colspan="2">Phone Number</th>
     </tr>
     <tr>
          <th>Home</th>
          <th>Mobile</th>
     <tr>
     <tr>
          <td>John Smith</td>
          <td>555-1234</td>
          <td>555-4321</td>
     </tr>
     <tr>
          <td>Bob Jones</td>
          <td>555-2943</td>
          <td>555-4929</td>
     </tr>
</table>

The above code would look like this:

Name Phone Number
Home Mobile
John Smith 555-1234 555-4321
Bob Jones 555-2943 555-4929

Cell Spacing and Cell Padding

Cell Spacing is used to create space between cells.
Cell Padding is used to create space between the cell content and the border of the cell.

Both cellspacing and cellpadding are attributes for the table tag. Here is an example of a table with a cellspacing=”10″:

Table Heading Table Heading
Table Cell Table Cell
This is an example This is an example

and here is a table with cellpadding=”10″:

Table Heading Table Heading
Table Cell Table Cell
This is an example This is an example

Alignment

The align attribute for td and th tags can be used with the values left, right, center or justify, to specify how the contents of the cell should be aligned. Justify spaces the words in the cell so that each line is an equal width. If an align attribute is not used, the default alignment is left, unless otherwise specified by the CSS.