Introducing Tables

Tables

So far we’ve learned how to add a bunch of text to a page and format it in all sort of different ways, but we can only place our text line by line going from the top of the page to the bottom. How useful would it be if we could also set up blocks of text side by side? How useful would it be if we could make a table?

We’re in luck because we can do just that with HTML. A table lets us organize text into rows and columns. An example is shown here:

Firstname Lastname
Bob Jones

 

The code we start with is the <table> tag. This tells the browser we’re going to start our table. By default, the lines around the table cells are hidden, leaving a table that looks like this:

Firstname Lastname
Bob Jones

 

To display lines around the cells, we need to add the property border="1" to the <table> tag, resulting in <table border="1">. After the table is complete, we will have to add the closing tag </table>.

Table Rows

On the next line of code, we can begin specifying the table structure, one row at a time. Each row must be started with a <tr> tag (tr stands for Table Row). Inside the row, we will specify each of the cells (one for each column in the table). After the row is complete, we will have to add the closing tag </tr>.

Table Cells

Now that a row is started, we need to specify our table cells, from left to right (one for each column). Each cell must be started with the <td> tag (td stands for Table Data), and should be indented to help see where each row starts and ends. Finally, we are “inside” the first cell of the table. Following the example above, we would type “Firstname” immediately after the <td> tag (no space). The cell must then be closed with </td>. On the next line of code, we can make another cell and make its contents “Lastname.” Having these 2 cells completes our first row, which then can be closed with the </tr> tag (not indented). Now the whole row and table cells process repeats for the second row. Finally, when both rows are complete, the table is closed out with </table>.

Example 1 
<html>
<head>
    <title>My Web Page</title>
</head>
<body>

<table border=”1″>
<tr>
<td>Firstname</td>
<td>Lastname</td>
</tr>
<tr>
<td>Bob</td>
<td>Jones</td>
</tr>
</table>

</body>
</html>

Things to remember before you start your assignment: Tables work going from the top to bottom and from the left to the right, just like how you read. If one row has 2 cells the next row has to have 2 cells too, or things start to get really messy.

Table Tag

The <table> tag has several properties that you may find useful:

  • border – border width, in pixels
  • width – table width, in pixels or as percent of available space
  • align – table alignment (left, center, right)
  • bgcolor – background color of whole table
  • cellspacing – spacing between cells, in pixels
  • cellpadding – spacing within cells, in pixels (like internal cell margins)

Table Row Tag

The <tr> table row tag has several properties that you may find useful:

  • height – row height, in pixels
  • align – horizontal alignment of cells in row (left, center, right, justify)
  • valign – vertical alignment of cells in row (top, middle, bottom)
  • bgcolor – background color of cells in row

Table Cell Tag

The <td> table cell tag has several properties that you may find useful:

  • width – cell width, in pixels
  • height – cell height, in pixels
  • align – horizontal alignment (left, center, right, justify)
  • valign – vertical alignment (top, middle, bottom)
  • bgcolor – cell background color