Tables

Tables are great ways to keep your site organized. You can use tables to have your separate your navaigation bar from your content (like this website), you can use them to organize information on a page, and alot more!

Requirements:

Simple Text Editor (Notepad)

Lets first look at the HTML code for a simple table.

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

Example of Table

Okay, now lets examine all of these tags!

Opening Tag: <Table border="1">

This tag tells your computer that you are going to make a table. Just like many tags in HTML, there are alot of modifiers for this tag. The modifier used is the border modifier. This says that the border of the table will be 1 pixel large. Some other modifiers you can enter in the <table> tag are:

Cell Padding: The cell padding modifier adds more space around the content of your cells. For example, you could have a cell padding of 10. (<table cellpadding="10">
Cell Padding Example

Cell Spacing: The cell spacing modifier distances the space between the cells. For example, you could have a cell spacing of 10. (<table cellspacing="10">
Cell Spacing Example

Table Background Color: The background color modifier makes the background of the table a certain color. For example, you could have a background color of red. (<table bgcolor="red">)
Background Color Example

Align in Cells: The align modifier makes it so you can align the text inside a single cell to the left, right, or center. This comes in handy to make tables look neat. (<table align="left">)
Align Cells Example

 

How to setup a table for content/navigation areas:

Okay, so in order to make your site out of tables, we will do a simple two table design.

We will use the width and height modifiers on the table.

Navigation Bar

Content

 

 

 

Want to know how to get your website up onto the internet? Goto our Basics page!