Creating Tables

Basic structure:

<table>
<tr>
<td>
Content
</td>
<td>
More content
</td>
</tr>
</table>

Breaking it down


The <table> tag tells the browser to start a table, the <tr> tag tells the browser to start a row (think of it as table row), and the <td> tag tells the browser to start a new column (think of it as table down). Don't forget to close them in the order you opened them, <td> before <tr>.

Adding a Border

This table has a border
Howexciting!
 <table border="***" bordercolor="***">
Creating a border is very simple, just specify the border width by using border="***" and the border color by using bordercolor="***". Use hex codes to specify a color.

Specifying Which Borders to Display

Most of the time, you won't want all of the borders of a table to dispaly. To change this, place the rules="***" in the table tag, replacing the "***" with one of the following values. Keep in mind that the rules attribute might not display correctly in all browsers.
void - No external borders
above - A border above the table
below - A border below the table
none - No external borders
cols - Borders between the columns
rows - Borders between the rows
all - All internal borders (default)
border - All external borders (default)

Adding a Background Color

BlueBlue!
White!Purple!
You can add a background color to almost every tag of a table (tr, td, table, etc). You put bgcolor="***", replacing *** with a hex code.

Adding a Background Image

Works much like adding a background color, but this time you add background="IMG URL HERE". Our navigation bar is an example of how this works, but be careful when you use it. Overuse can look...odd.

Changing Table Sizes

You can change the size of just about everything, and tables are no exception. Simply add width="***" and/or height="***" to the table, tr, or td tags. You can either specify the height in pixels or by percent of a browser window.

Spanning Cells and Columns

Example table
Colspan=2Rowspan=3
One cellOne cell
One cellOne cell
 The Colspan and Rowspan attributes allow you to combine more than one cell into one. Place colspan="***" and/or rowspan="***" in the TD tag, replacing the "***" with the number of columns or rows, respectively, you want it to span.

Cell Spacing and Padding

The Cellspacing="***" attribute lets you change how much space there is between cells, whereas the Cellpadding="***" attribute lets you change how much space there is around the contents of the cell. Place them in the table tag, replacing the "***" with an amount (in pixels). These attributes are optional and can be used to increase the readability of your contents.
Getting Started :: Fonts :: Images :: Hyperlinks :: Tables :: Cascading Style Sheets :: Divs and Spans :: Frames :: Special Characters :: Hex Colors ::