Dark Scarab - HTML 006

PDF

Tables are very common in HTML websites. Tables help organize and show information in a much cleaner way than without it. People who do not know CSS rely on tables to create the layout of their web pages. Tables are also notorious for the use of many tags and attributes, causing a simple HTML page to look quite messy and complicated.

To define a table we use the <table></table> tags. Everything that is going to be put into your table must be within these tags. If you haven't already, open up your text editor and web browser and then make sure your HTML coding looks something like this.


		<html>

		<head>

			<title>My Web Page</title>

		</head>

		<body>

		

		<table>

		</table>

		

		</body>

		</html>

With that coding you can see that we have told the browser that we have tables we want rendered. However, we need to add a bit more to our coding. Tables work in HTML work in rows. So for every row within your table you must use the <tr></tr> tags. This defines a row. Even now you cannot just throw a few rows into your code and put some text into it. Now you have to add another pair of tags, <td></td>, to define what goes within each cell of your table. 'td' means table data. So let's add two rows and two columns into our site. Your table should look like this.


		<table>

		<tr><td></td><td></td></tr>

		<tr><td></td><td></td></tr>

		</table>

This is all done before we have even put any information into our table. If you open your HTML page into your browser there will be nothing to see. Now we can put some data into our table.


		<table>

		<tr><td>Cell 1</td><td>Cell 2</td></tr>

		<tr><td>Cell 3</td><td>Cell 4</td></tr>

		</table>

Anything that is put in between the <td></td> tags will be rendered in your browser window. If you look at your page in your browser now you will see something a like this:

Cell 1	Cell 2
Cell 3	Cell 4

Now, lets say you wanted to add a title to your table. One way is to add the <th></th> tags. These are the table header tags. Just like the <td></td> tags, these must be inbetween the <tr></tr> tags. Add a table header into your table and refresh your browser window to see the outcome:


		<html>

		<head>

			<title>My Web Page</title>

		</head>

		<body>

		

		<table>

		<tr><th>This is my table!</th></tr>

		<tr><td>Cell 1</td><td>Cell 2</td></tr>

		<tr><td>Cell 3</td><td>Cell 4</td></tr>

		</table>

		

		</body>

		</html>

Typically, the information put into a table header will be bolded (if it is text). You can use the <th> tags the same way you use the <td> tags. The only issue we have with our table is that the header cell causes the ones beneath it to stretch out. Since this may be an undesirable look, we can use an attribute called colspan="". In this situation it would look like this:


		<table>

		<tr><th colspan="2">This is my table!</th></tr>

		<tr><td>Cell 1</td><td>Cell 2</td></tr>

		<tr><td>Cell 3</td><td>Cell 4</td></tr>

		</table>

The colspan attribute just tells your <td> or <th> tags to span across multiple columns (cols). You can also do the same thing with rowspan="". Instead of columns, the cell would span over multiple rows. If you refresh your browser you should see that the table header spreads across both of the cells.

This is hardly the limit of tables. Let's add some color and borders to our table. Just like in the background of the whole site you use the same attribute to change the background of your table (bgcolor=""). To add borders all we have to do is add the border="" attribute. The value used in the border is a numerical value telling the browser the width of our table's borders in pixels:


		<table bgcolor="gray" border="2px">

		<tr><th colspan="2">This is my table!</th></tr>

		<tr><td>Cell 1</td><td>Cell 2</td></tr>

		<tr><td>Cell 3</td><td>Cell 4</td></tr>

		</table>

Try this out in your HTML page and refresh your browser. You should see borders and a gray background (unless you chose a different color). One thing to note is that the attribute bgcolor is not limited to the <table> tag. You can also use this in the <tr>, <td>, and <th> tags. This would allow you to give each of your cells a different color.

Another popular attribute is the width attribute. You can use this attribute in the <table>, <th>, or <td> tags. Instead of the browser automatically choosing the side you just tell it the amount of pixels you want your table, or cell to span. If you are using the width or height attribute within the table tag you can use percentages. 50% would spread across half of your browser's veiwing window.


		<table bgcolor="gray" border="2px">

		<tr><th colspan="2">This is my table!</th></tr>

		<tr><td width="200px">Cell 1</td><td>Cell 2</td></tr>

		<tr><td>Cell 3</td><td>Cell 4</td></tr>

		</table>

Test this out in your browser. You can change the width of one cell will also change the width of all the ones below and above it. You cannot alternate the width of your cells within one column. If you have two different sizes the browser will typically chose the largest one. You can also use the height="" attribute in the same way.

Also, there is no limit to what you can put within a table cell. You are free to do anything you want within the <td> or <th> cells. If you can put it in between the <body> tags, it can be put into table cells. And yes, you can put tables, in tables, in tables.

Some other attributes you can use in the <table> tag are cellspacing="", cellpadding="", and align="". The first two are defined by a numerical value followed by 'px' (5px for example). Cellspacing is the space between each of the cells, cellpadding is the space between a cell's content and its border, and align positions your table. For align you can use left, center, or right.

Column Widths

In some cases you want to define all of the different widths of the columns in your tables. To do this we just use the <colgroup> tags. To set the colgroup tags up you do this:


		<table>

		<colgroup>

		</colgroup>

		<tr><td>1</td><td>2</td><td>3</td></tr>

		</table>

Now we use the <col> tags to define the width of the columns. To give each column their width you use the width="" attributes. Also, because we will have three columns we must add the span="" attribute to the colgroup tag.


		<table>

		<colgroup span="3">

			<col width="50px"></col>

			<col width="75px"></col>

			<col width="20px"></col>

		</colgroup>

		<tr><td>1</td><td>2</td><td>3</td></tr>

		</table>

If you test this out in your browser you should find that each of the columns have their own widths as defined by the three col tags and the width attribute.