... part of the Web Site of George North -- Back to BlackBoard
Webpage Design and Development, CPST-240-10
Fall 2008

News - Week of Monday, Oct 13
Assignment
Case Problem 4
Key Terms

Tutorial 4 - Designing a Web Page with Tables

Table tags can give you control of how your web page content is displayed. This is done by use of lots-of balanced tag sets. By balanced is meant that every <table> has a matching </table>. Every <tr> has a matching </tr>. Etc. Etc.

When table tag sets are NOT balanced, browser display of your content can get quite mixed up. Results from one Browser to another can also be very different. I am dyslexic. (More dyslexia links. Dyslexia is a gift?) Anyway, I am prone to misspelling table ... as tabel. And for whatever reason, the misspelling is likely to be with the end tag ... </tabel>. I've learned the hard way about this mistake.

So, my advice when building tables is to go slow. Add a few HTML table tag sets. Display the page in a browser to make sure its looking like you want it to. Add some more HTML. Display some more. Etc. Etc. If you use W3C Markup Validation to check your web pages as you write them, you will NOT have problems with your table tags, because you will find and correct any mistakes as you make them.

When building tables, view your page using more than one browser. If Internet Explorer is your main web browser, then you can use FireFox (freely available) as your 2nd browser. Using multiple browsers to view your pages is always a good idea.

So, my advice when building tables is to, always, always, add the HTML table tags as sets before you put in the content. This will help you to NOT leave out a begin or end tag. For example, do this first ... 

<table>
	<tr>
		<td>
		</td>
		<td>
		</td>
	</tr>
	<tr>
		<td>
		</td>
		<td>
		</td>
	</tr.>
</table>
... then go back and fill in content. Its a lot easier to see that your tag sets are balanced before adding content. Hint - you can just copy and paste the above table tag set.


More hints:
  • Diagram the table layout before you start writing your HTML code.
  • First create a table structure with minimal content. Once the layout appears correct, start formatting the content within the table cells and add more content.
  • Insert comment tags throughout the table layout to document each section.
  • Indent the code for the various levels of nested tables to make your code easier to interpret.
  • Enter opening and closing table tags at the same time in order to avoid the error of either omitting or misplacing the closing tag.
  • Test and preview your layout as you proceed in order to catch errors early in the design process.
  • Limit the number and extent of nested tables, since they can increase the amount of time required to render a page and cause accessibility problems for non-visual browsers.
  • Use cell padding and cell spacing to keep the table content from appearing too crowded.
  • Use row spanning to vary the size and starting point of articles within a columnar layout. Side-by-side articles that start and end at the same location are often visually boring and can be difficult to read.
  • Avoid using more than three columns of text. Too many columns can result in column widths that are too narrow.
  • Use fluid elements to reduce the amount of unused space in the browser window. Use fixed-width elements when you need to precisely place elements on the page.
    •

    Don't forget about the Site Index page. It has links to all the course web pages.


    Get Started: Ask for help.