Table Handout

Why Build a table? Tables allow you to enjoy more control over elements on a webpage. You can create columns. You can create standout header sections. You can employ space in a more efficient way. So, why bother? The answer is to consider how webpages work without tables. Without tables, you have very little control over the placement of text and graphical elements. The default mode on web browsers is flush left. In other words, unless you indicate otherwise, every thing you place on a page will be located on the left side. While you can use the "align" attribute to move some elements to the right side of the page, this approach offers little flexibility.

Tables address this problem by placing visible or invisible borders between page elements that you can control. The best way to understand this process is to view it in action. Let's say I want to organize a piece of text by columns like this:

Building tables is big fun. It just takes some practice. Tables allow you to control the placement of text and graphics.

Here's the code needed to accomplish this degree of control in a webpage.

How do tables work? I'll discuss attributes like BORDER and WIDTH later on. Right now, let's concentrate on three basic elements: <TABLE>, <TR>, and <TD>. The <TABLE> tag instructs the browser to make the table. The <TR> tag says, "start a new row." A row contains one or more cells horizontally. Note: even if a cell has more than one line of text, it can still be part of a single row if the text is large enough to wrap around to a new line. The <TD> tag says, "give me a cell within that row." A cell is a container where you can add text, graphics, whatever. The </TD> tag says, "stop making this cell." The next <TD> tag says, "make a new cell in the same row." Until the browser reads a <TR>, it'll keep making cells in the same row. The <TR> tag allows you to stack rows. A vertical stack of cells, by the way, is a column. Notice that you need to close your last cell with a </TD> and then employ </TR> and </TABLE> to properly close your table. Give it a try: lay out two columns of text in the manner you see above - just copy/paste the code.

Advanced table attributes: Here are a list of advanced attributes you can play with to add more control over individual cells. By the way, if you like this table, you can grab the code by viewing the page source.

A note about text color: you can also change the color of text inside a specific cell. After you've closed out your <TD> tag, add a <font> tag to the text. Here's an example: <FONT COLOR=red> results in red text. It's a good idea to use a </font> tag when you wish to stop coloring the text. To help you gain more control over your text colors, Michele D. Jinkerson offers a great color chart.

Here's a complex table that employs each of these attributes:

Here's the code for the table above.

By now, you know enough to work on your own tables. To be honest, the process can be difficult. Each detail must be correct. If the browser doesn't recognize your code - because of a typo, perhaps - it'll generally ignore it or display something pretty ugly. But with some practice, you can use these tags with impressive results. Good luck!

[Syllabus] [Introduction] [Policies] [Assignments] [Reading] [Check your grades] [Frontpage]