www.webcodingtech.com

Create and use HTML tables

HTML tables are a relatively old way of structuring and formatting a webpage. Newer technology such as CSS is also available to accomplish similar formatting. In spite of this hundreds of thousands of webpages continue to use tables for some of their formatting needs.

If you haven't used tables before, this page is for you. It will give you a quick and easy-to-understand description of how to get started using tables. To start with the HTML <TABLE> tag is a spanning tag, meaning it has an opening tag and a closing tag. Let's illustrate the basics of creating a table.

As you can see by the above example, you use the <TABLE></TABLE> tags to create the table, <TR></TR> (Table Row) tags inside the table tags to create rows and you use the <TD></TD> (Table Data) tags with in the row tags to create individual "cells" withing the rows. These cells can also be thought of as "columns". There are also the special <TH></TH> (Table Heading) tags which are often used in the first or last row of the table to output headings for each column. The only difference between TD and TH tags is usually how they're displayed in the browser- TH tags usually are centered and bolded. But as you can see, the table that this code produces doesn't look that hot. Let's explore some more tags and tag attributes that we can use in a table to further format the table and data.

More advanced tables

First of all, we are going to add an extra row at the bottom, to use to total the value of the coins. In the cell tag <TD> for this row we are going to use two special attributes, colspan, which will tell the cell how many columns to span, and align, which tells the cell how to align the cell contents. We have also added the align attribute to the cells in the center column, so that the quantity of coins will be centered. The align attribute can take the value "left", "center" or "right" and aligns the contents horizontally. If you want to align the contents vertically use the attribute valign, which takes the values "top", "center", or "bottom"

Let's also add some attributes to the <TABLE> tag so that the table looks a little better. You can use border="3" to create a border. the value is the width of the border in pixels. You can use cellspacing="5". This is the amount of space, in pixels, that should appear between all the cells in the table. The cellpadding="3" attribute sets the amount of space that should appear inside the cell, separating the cell edges from the content. In addition to the colspan attribute we have used, you can also experiment with the rowspan attribute, which allows you to have a cell span various rows.

Some more useful tags

There are *lots* more tags that can by used with tables. Here are a few more of the most useful ones. If you don't want the contents of one of your cells to "wrap", in other words you want it all on one line, you can use the nowrap="nowrap" attribute within a <TD> tag like this: <TD NOWRAP="NOWRAP">. You can also set the background color of the table, row or cell by using this attribute: bgcolor="#009900" the 6 numbers or letters (in this case 009900) are a hex number defining the value to use for each of the three colors red, green and blue. The first two digits are red, the next two are green and the last two represent blue. These hex numbers range from 00 to FF and are equivalent to the decimal numbers 0-255. For more help on choosing colors and understanding the hex number system, see the HTML color chart tool.