HTML Tables

HTML tables are the single most valuable tool for lending visual appeal to your Web page. The basic HTML that you've learned thus far allows you to add interesting content to your page but is limited in page formatting flexibility. You can left or right justify, or center your content on the page but that's about it. As you learned in the HTML tutorial, Web browsers ignore any multiple spaces, tabs, and return characters in your text. There is no way to format multiple columns or align text and pictures along an indented margin. Tables allow you to do these things and more...   

You can create tables of any dimension divided into rows and columns of your choosing. You can make the cell borders visble or invisible and you can pad the space between the text and cell walls. You can fill your table cells with text, graphics, links or any other Web page object. You can use seperate background colors for cells to create a  more asthetically pleasing look. Surf the Web and view the source of the pages that look the best. I'll bet you'll find that they achieve their best effects through the use of tables.

 


You can use tables to set up a sidebar menu.
  1. Menu item
  2. Menu item
  3. Menu item
  4. Menu item
  5. Menu item
  6. Menu item
  7. Menu item

Each menu item can be a link to another web page.

PE02072A.gif
(2034 bytes)

Text can be formatted within the cell. This text is centered both horizontally and vertically within this cell.

 

 

You can specify table size by pixel or percentage of window size. If you choose to specify the size in pixels, there's a possibility that the table will be larger than the browser window forcing the user to use scroll bars --gasp!
This table uses proportional measurements. It will expand when you maximize your browser window, and contract when you make the window narrower. There is a minimum width to any table which will cause the table to run off the viewable area at some point.
 

The contents of this table is mostly nonsense to give you a feel of the possibilities available to you when using tables. How about a nice photo of Landis green. Using a table, we're able to right justify this text to but up against the photo.  I've also tied the two cells together with a common color. Garnet & Gold?

fsu.gif (43885 bytes)
TN00018A.gif (1390 bytes)

Starting to get the picture?

BS00865A.gif (2933 bytes)

You can even create tables within tables!

  Monday Tuesday Wednesday
10:00 Sleep Sleep Sleep
11:00 Sleep Sleep Sleep
12:00 Eat Eat Eat

 


 

What To Do, What To Do...

The tables on this page are rather complicated. What we need is a tutorial on creating basic tables. Rather than reiterate other peoples work, I'll point you to some helpful Web pages to get you started.

Click on the links listed here on the right. Don't just read about tables, try adding tables to your web page. Play around with them until you are comfortable with their implementation. Start planning how you might lay out your Web page, using tables, to create a visually pleasing representation of who you are.

Don't invest too much time in implementing your design at this point. Next week, we'll learn a much easier way to implement tables that require no HTML coding what so ever.   

Also listed are links to pages that incorporate tables. Check them out and view the HTML source code.

Tutorial Links

Beginning Tables Tutorial

Intermediate Tables Tutorial

Netscape Tables Tutorial

Extremely Helpful Examples

Tables in Action

http://www.cnet.com

http://home.netscape.com

http://www.microsoft.com

http://www.cs.fsu.edu/~baldauf/Internet/index.html

 


Back to CIS3060's Home