Web Design - Introduction to Tables

Sections:  Introduction  |  Section 1  |  Section 2  |  Section 3  |  Section 4  |  Section 5

Section Five:  Part A  |  Part B  |  Part C  |  Part D  |  Part E

Tables When <table> tags were added to the HTML protocol, there intended use was to display data in a readable format. As the Internet blossomed and more pages were created for commercial purposes, web designers began to use tables for creating attractive page layouts. However, this method for creating a web page's layout was limiting; the display of the page was not uniform across browsers nor was it scalable to a visitor's screen size. With the introduction of Cascading Style Sheets (CSS), web designers stopped using tables for layout and instead used CSS as it allowed for a more uniform display across browsers and it allowed for scalability of pages. The use of tables has now returned to its inteneded purpose: the display of data in a readable format. You have likely seen information displayed in a table; with the table having a a certain number of rows and a certain number of columns. For instance, the table below has 4 rows and 3 columns. Each "box" in a table is called a cell, so there are 12 cells to this table. One cell contains "Name," another contains "Height," another contains 125 lbs., etc. HTML Tags Used to Create Tables There are 4 sets of HTML tags involved in making the table listed above. They are: <table></table> This tag tells your browser that a table should be displayed. <tr></tr> This tag creates a table row. <th></th> This tag creates a header data cell in a row. The text listed in a <th> data cell is bold and centered-aligned <td></td> This tag creates a non-header data cell in a row. The text listed in a <td> data cell is of normal weight (not bold) and left-aligned. Not so bad right? Just tell the web browser: "Display a table. Include a row with three header data cells. Next include a row with three non-header data cells. Include an additional row with three non-header data cells. Lastly, add one last row with three non-header data cells." To better understand the tags presented, lets look closely at our previous table example. To create the table it is important to understand the table's form and understand how to translate that form into the HTML tags presented. Review the image below (an enlarged version of the table above) and note the parts of the table listed. Stop and Think Use the colored borders as your guide to answer the following questions: How many tables are shown? How many rows are shown? How many header data cells are shown? How many non-header data cells are shown? As you may have noticed there is one table listed. Within the table there are four rows. In the top row there are three header data cells. The bottom three rows each have three non-header data cells. Take a moment to consider the nested nature of the table. Next

© 2008 KCDL. All rights reserved.