Tables

Tables can often be complex and confusing; it requires holding a mental image in your head while you write the HTML code.


Basics

Here are the basic commands for creating a table:

TABLE

Tables begin with a very simple command:

<table> </table>

That is just the outline, however. Tables are made up of rows and columns.

ROWS

In HTML, rows are created, and then cells are inserted into the rows. You never create a column; a column is defined by the cells.

A row is created with this command:

<tr> </tr>

"Tr" stands for "Table Row."

CELLS (COLUMNS)

Inside the table row, you place table cells. Each cell has this tag:

<td> </td>

You can put multiple cells inside any row. The number of cells you put in decides how many columns there are. In a standard table, every row should have the same number of cells.

The Result

In the end, a table with two rows and three columns would look like this:

That will create a table that could look like this:

If you accidentally leave out the third set of "td"s in the second row, it would look like this:


Basic Table Attributes

When creating a table, there are a few basic attributes you should consider using.

Attribute
Value(s)
Explanation
width=
"800" or "75%"
Sets the width of the whole table in pixels, or a percent of the available space.
border=
"number"
Sets the outside border width (not the inside borders). The outside border will take on a 3-D shaded appearance. If the border is set to "0" then the table will appear to be invisible.
bgcolor=
"number"
Will give the whole table a background color, including the spaces between cells.
cellpadding =
"number"
Sets the space in pixels between the contents of a cell and the cell's border.
cellspacing =
"number"
Sets the space in pixels between cells.

 

In the following live exercise, try adding various values to the attributes in the "table" command.

  1. try changing the width to values between 50 and 750
  2. try changing the cellspacing to values between 0 and 10
  3. try changing the cellpadding to values between 0 and 10
  4. try changing the border to values between 0 and 20
  5. try changing the bgcolor; use colors "pink", "lightgreen", and "violet"; more colors here.



Adding Text & Controlling Widths

When you add text to a table cell, the cell will automatically expand in size. Columns without text will shrink to almost nothing. Without any limits on a column's width, it will expand or contract, depending on how much text is in it or in other columns. This is how text added to one cell would look.

Can you see how the first column has suddenly expanded to take up most of the table, and the blank cells have shrunk to tiny areas? Try it in the Live HTML Exercise below. Where you see the "X" in the top left cell, start typing more and more text. See how the cell/column expands?

In the third row of text below, find the "X" in the first row, first column. Start typing text after the "X" inside the <td> tag.

Most people don't want their columns to change like that. You can control this problem with "width" attributes added to the "td" command. You should add them to at least one cell in each column. As long as the width in one row is set, it will control the width of that column in all rows in that table. In the Live Exercise below, I added width to the last (right side) column only. notice that I used a number in pixels; you can also use percent, if you wish. Try adding text to the top left cell now. Then try adding "width" attributes to all three cells in the first row.

NOTE: if you use pixels as the width, the widths must add up to the table width. If you use % (percentages), they must add up to 100%.



In the table below, you will note that I have included a width attribute to the first cell/column. If you type extra text after the "X," it will not expand that column. However, since the width is set only for that column, the other colums will expand if you type text into them.

In this exercise, try adding width attributes to different cells in the first row to see the effects.




Other Table Features

There are other things you can do to make a table look nicer.

Table Row Attributes
  • <tr bgcolor="lightblue"> - this will add a background color inside all the cells of that row, but not to the spaces between the cells.
  • <tr align="center"> - this will center all text within each cell of that row.
  • <tr height="60"> - this will increase the height of the row. You should use pixels, not percent. If you use the height attribute, you may also want to use the attribute valign="top/middle/bottom" so the text goes where you want it vertically. You can change the height of a single cell, but it will affect the whole row, so it is better to adjust height in the <tr> command.
Table Cell Attributes
  • <td bgcolor="lightblue"> - this will add a background color only inside one cell.
  • <td align="center"> - this will center all text within only the one cell.

You can go ahead and try these out in the Live Exercise above.


Colspan & Rowspan

Note: This portion (Colspan & Rowspan) is not on any test in this class. This is just extra information if you would like to know it.

Sometimes you want to "merge" cells with one another. For example, what if you want the top row to be one cell, while the other rows have three cells each? For that, you would use the colspan attribute for the "tr" command:

<td colspan="3"> This goes all the way across the table </td>

Of course, you must then only have ONE "td" cell/column in that row, otherwise the table will look funny.

That looks like this:

This text goes all the way across the table.
     
     

Similarly, you can do a rowspan command to "merge" cells up and down. If you do this, then you must subtract one "td" cell/column from the affected rows below it.


You have now learned most of what you need to make tables in HTML. I provide two exercises below--one for a table with colspan, another with a table using rowspan, so you can get an idea what they are like, and you can play with them. Try out anything and everything about tables that you have learned!

And:

 



 



Video Review