Unit 5.3. Basic Tables
Formatting with HTML Tables
A convenient way to display information or data in a nicely aligned tabular format is to place it inside an HTML table. To do so, you must use the TABLE tag. The TABLE tag brackets your table. All other text or tags to be included in your table should be nested inside the TABLE tag.
Copy your Test.htm file and save it with a new name, Table.htm. Create a table inside your new Table.htm file with the following example code:
<HTML>
<HEAD>
<TITLE>This is your title: with a short
description</TITLE>
</HEAD>
<BODY>
<H1>The title of your web page should be placed here.</H1>
<P><TABLE></TABLE></P>
</BODY>
</HTML>
 | Since the table element is not a block element (like the P tag), but instead an inline element (like the IMG tag), you should insert a P tag in front of the TABLE tag to ensure sufficient space is added above the table. |
The TR (Table Row) and TD (Table Data) tags should be used to create a grid of rows and columns. For example:
<P><TABLE> <TR><TD>Row 1 - Col 1</TD><TD>Row 1 - Col 2</TD><TD>Row 1 - Col 3</TD></TR> <TR><TD>Row 2 - Col 1</TD><TD>Row 2 - Col 2</TD><TD>Row 2 - Col 3</TD></TR> </TABLE></P>
Note that the <TR> begin tag and </TR> end tag bracket each row.
Add these new lines of code to your Table.htm file (between the <TABLE> and </TABLE> tags), and load the page into your browser to see the effect. Your file should resemble the example file shown in Figure 5.9.
Figure 5.9. Your Web page with the inclusion of a table.
A table won’t look like a table without a border. In this case, you can include the table BORDER attribute inside the TABLE tag. For instance, you can type the following:
<P><TABLE BORDER="1"> <TR><TD>Row 1 - Col 1</TD><TD>Row 1 - Col 2</TD><TD>Row 1 - Col 3</TD></TR> <TR><TD>Row 2 - Col 1</TD><TD>Row 2 - Col 2</TD><TD>Row 2 - Col 3</TD></TR> </TABLE></P>
Add this BORDER attribute to Table.htm, then refresh your page to view your changed table. Your file should resemble the example file shown in Figure 5.10.
Figure 5.10. Your Web page with the inclusion of a border for your table.
Increasing the value of the BORDER attribute increases the thickness of the outer border of the table, causing the outer border to display in 3-D relief.
Change the value of the BORDER attribute in Table.htm from 1 pixel to 7 pixels, then view your changes. Your file should resemble the example file shown in Figure 5.11.
Figure 5.11. Your Web page with an increased table border.
To further define the appearance of table borders, you can also utilize the BORDERCOLOR attribute. Use BORDERCOLOR to set the color of the border equal to a hexadecimal color or one of the 16 named colors in HTML described earlier in this chapter.
The CELLSPACING attribute adds space between cells, while the CELLPADDING attribute adds space within each cell.
Add 5 pixels of spacing and padding to your table in Table.htm like the following additional code:
<P><TABLE BORDER="7" CELLSPACING="5" CELLPADDING="5"> <TR><TD>Row 1 - Col 1</TD><TD>Row 1 - Col 2</TD><TD>Row 1 - Col 3</TD></TR> <TR><TD>Row 2 - Col 1</TD><TD>Row 2 - Col 2</TD><TD>Row 2 - Col 3</TD></TR> </TABLE></P>
Your changed table should resemble the example file shown in Figure 5.12.
Figure 5.12. Your Web page’s table with extra spacing and padding.
The TH (Table Heading) tag is very similar to the TD (Table Data) tag, except that it defines a particular cell as a heading cell rather than as a simple data cell. Any text entered into a TH tag will be rendered as centered, boldfaced type.
Add a row of column headings to your table in Table.htm with the following additional code:
<P><TABLE BORDER="7" CELLSPACING="5" CELLPADDING="5"> <TR><TH>First</TH><TH>Second</TH><TH>Third</TH></TR> <TR><TD>Row 1 - Col 1</TD><TD>Row 1 - Col 2</TD><TD>Row 1 - Col 3</TD></TR> <TR><TD>Row 2 - Col 1</TD><TD>Row 2 - Col 2</TD><TD>Row 2 - Col 3</TD></TR> </TABLE></P>
You should notice that your headings are displayed similarly to those displayed in the example file shown in Figure 5.13.
Figure 5.13. Your Web page’s table with a row of column headings.
To center the table, just insert an ALIGN=“center” attribute value in the TABLE tag.
Add this attribute to the TABLE tag in Table.htm like this:
<P><TABLE ALIGN="center" BORDER="7" CELLSPACING="5" CELLPADDING="5"> <TR><TH>First</TH><TH>Second</TH><TH>Third</TH></TR> <TR><TD>Row 1 - Col 1</TD><TD>Row 1 - Col 2</TD><TD>Row 1 - Col 3</TD></TR> <TR><TD>Row 2 - Col 1</TD><TD>Row 2 - Col 2</TD><TD>Row 2 - Col 3</TD></TR> </TABLE></P>
When you view your centered table, it should resemble the newly centered table displayed in the example file shown in Figure 5.14.
Figure 5.14. Your Web page’s newly centered table.
Alternatively, you can see the same effect by putting your table inside a CENTER tag or by placing it inside a center-aligned paragraph.
You can specify the size of your table by including WIDTH and HEIGHT attributes. You can use either absolute values (pixels) or relative values (percentages).
Specify a table width of 80% for your table in Table.htm like this:
<P><TABLE ALIGN="center" BORDER="7" CELLSPACING="5" CELLPADDING="5" WIDTH="80%"> <TR><TH>First</TH><TH>Second</TH><TH>Third</TH></TR> <TR><TD>Row 1 - Col 1</TD><TD>Row 1 - Col 2</TD><TD>Row 1 - Col 3</TD></TR> <TR><TD>Row 2 - Col 1</TD><TD>Row 2 - Col 2</TD><TD>Row 2 - Col 3</TD></TR> </TABLE></P>
When you view your newly changed table, you should notice that it now occupies 80% of the browser window’s width, like that of the example file shown in Figure 5.15.
Figure 5.15. Your Web page’s table with its new table width.
You can horizontally align your cell contents by placing an ALIGN attribute value in either the TR tag (which will align the entire row), or in a TD tag individually. The setting placed in a TD tag will override a similar setting placed in its containing row’s TR tag. For instance, if a table row has been set as left-aligned, however, one of the table data items within it has been set as right-aligned, that table data item will remain right-aligned, even if all the other table data items in that row are left-aligned due to the row alignment setting.
The default alignment for table rows (that do not contain TH tags) and table data items is left-aligned.
Use the ALIGN attribute to right-align the first row of your table in Table.htm by adding the following code:
<P><TABLE ALIGN="center" BORDER="1" CELLSPACING="5" CELLPADDING="5" WIDTH="80%"> <TR><TH>First</TH><TH>Second</TH><TH>Third</TH></TR> <TR ALIGN="right"><TD>Row 1 - Col 1</TD><TD>Row 1 - Col 2</TD><TD>Row 1 - Col 3</TD></TR> <TR><TD>Row 2 - Col 1</TD><TD>Row 2 - Col 2</TD><TD>Row 2 - Col 3</TD></TR> </TABLE></P>
When you view your newly changed table, you should notice that the first row values are right-aligned while the second row values are left-aligned. Your table should resemble that of the example file shown in Figure 5.16.
Figure 5.16. Your Web page’s table with its new table width.
Use the ALIGN attribute to horizontally align the values of table rows (TR), table headings (TH), and table data cells (TD). The possible values are “left,” “center,” and “right.” Recall that center alignment is the default for table heading cells and left alignment is the default for table data cells.
By inserting a WIDTH attribute in the top cell of a column, you can specify the width of the entire column. Like table widths, column widths can be specified in either percentages or pixels. The columns of your table start out being fairly equal in width. A browser will expand or contract the columns of a table depending on their contents. Column widths set in percentages will expand or contract depending on the width of the browser window. Column widths set in pixels will remain the same width, irrespective of the width of the browser window. If you set all the columns of a table to a fixed width using pixels, you should not set a percentage width in the TABLE tag.
You can vertically align your TH, TR, or TD cell contents by using the VALIGN attribute. The possible values are “top,” “middle,” and “bottom.” The default is middle alignment.
Set the bottom row to top alignment in your table in Table.htm by adding the following code:
<P><TABLE ALIGN="center" BORDER="1" CELLSPACING="5" CELLPADDING="5" WIDTH="80%"> <TR><TH>First</TH><TH>Second</TH><TH>Third</TH></TR> <TR ALIGN="right"><TD>Row 1 - Col 1</TD><TD>Row 1 - Col 2</TD><TD>Row 1 - Col 3</TD></TR> <TR VALIGN="top"><TD>Row 2 - Col 1</TD><TD>Row 2 - Col 2</TD><TD>Row 2 - Col 3</TD></TR> </TABLE></P>
When you view your newly changed table, you should notice that the first row values are middle-aligned while the second row values are top-aligned.