Tables

I like tables and make good use of them. Tables are great for summarizing large amounts of information and for structuring data. Tables allow viewers to find what they need quickly and easily. Tables are part of HTML 3.2 specifications and most of the popular browsers now support them.

<HTML>

<HEAD>

<TITLE>School</TITLE>

</HEAD>

<BODY>

<CAPTION><STRONG>Bedford Schools</STRONG></CAPTION>

<TR>

<TD>

<TD>Forest

<TD>Bedford

<TD>Stewartsville

<TR>

<TD><STRONG>High Schools</STRONG>

<TD>Jefferson Forest

<TD>Liberty

<TD>Staunton River

<TR>

<TD><STRONG>Middle Schools</STRONG>

<TD>Forest

<TD>Bedford

<TD>Staunton River

<TR>

</TABLE></H3>

</BODY></HTML>

Here is an explanation of this table.

1.A table must be declared with TABLE tags. Therefore <TABLE> denotes the beginning of a table and </TABLE> denotes the end of the table. If you leave off the closing tag, your table won't work. TABLE is a container element and so everything contained between the opening and closing TABLE tags is part of the table.

2.This table begins with a CAPTION tag. The CAPTION tag is optional. It represents or describes the contents of your table. Most browsers will automatically center the caption above the table contents. A caption can be placed above or below the table. To place the caption below the table, use the attribute ALIGN="BOTTOM" as in <CAPTION ALIGN="BOTTOM"> (try it). Note also that I strongly emphasized the caption and my headings. This is optional but it does serve the purpose of making your caption and headings stand out more.

3.A table is made up of rows and columns and tables are generated row by row with each row going from left to right. A row is a horizontal collection of cells. Therefore, Forest., Bedford and Stewartsville are in the first row; High School, Jefferson Forest, Liberty and Staunton River make up the second row; Middle School, Forest, Bedford and Staunton River make up the third row. Our table has three rows. Columns are vertical. Therefore High School and Middle School are in the first column, while Forest, Jefferson Forest and Forest make up the second column, and so on.

4.Rows are divided into cells and each cell in our example is a data cell. A cell can also contain no data (the first cell in the first row is empty or blank). Cells can also overlap. That is, a cell can span across more than one row or span more than one column and we will deal with that in Lesson Twelve.

5.TD stands for Table Data. It denotes the beginning of a new cell. You simply place this tag in front of the information you want in the cell. Thus TD is used to mark up each individual cell. The TD cell can contain almost anything such as tags that center, emphasize, and color text. A data cell can contain lists, images, and even nested tables (a cell containing a table). The list goes on. The closing TD tag (</TD>) is optional. Some people use it as good practice to close each table cell explicitly. If you have a table inside a cell (nested tables), then you should use the closing tag to close each cell and row as some browsers get nested tables wrong and will display them incorrectly. So use </TD> if you want, as in:

<TD>Forest</TD>

<TD>Bedford</TD>

but each new TD tag implies that the previous one has ended.

6.You begin each row with a <TR> tag. TR stands for Table Row. Tables are always constructed as sequences of rows. Thus <TR> tells the browser that a new row is now beginning. If you don't use the TR tag for each new row, the browser assumes the cells will keep going to the right. There is also an optional end tag (</TR>) to explicitly terminate a row. However, each TR implies that the previous row has ended. Again, if you have a table inside a cell, you are recommended to close all cells and rows as some browsers need them to get the nested tables to print correctly.

7.I used <H3 ALIGN="CENTER"> to center the table. The header tag, H3, has no effect on the data. I could have used any header tag and the results would have been the same. You can also use ALIGN="RIGHT" to have the table aligned with the right side of the browser screen (right justified). If you remove this attribute, you will see the table aligned with the left side of the browser screen (left justified). Note that some browsers may not honor the ALIGN attribute to center a table.

8.Notice in our example, that the width of each column is not the same. This is because the width of each column is determined by the width of the largest cell in that column.

Now SWITCH to NOTEPAD and change the opening TABLE tag to:

After you have saved the change, load the web page into your browser. Now Change the border to 10.