News.html

... part of the Web Site of George North -- Back to Site Index to BlackBoard

Webpage Design and Development, CPST-2400-10
Spring 2010

News - Week 10, Monday, Mar 15
Assignment
Case Problem 2
Key Terms

Tutorial 5 - Working with Web Tables

Tutorial 5, Case Problem 2 serves as your Mid-term Exam. Including this one, there are 6 assignments left to complete. Turn in the assignment on Friday (Jul 3) or before, and I will provide feedback and give you a chance to make corrections ... as long as you resubmit it before due date.

Tutorial 5 - Working with Web Tables - Midterm Exam

Table tags can give you control of how your web page content is displayed. Reading Tutorial 5, you will find that Web Tables provide you with rich design choices.

Using tables requires lots-of balanced tag sets. By balanced is meant that every <table> has a matching </table>. Every <tr> has a matching </tr>. 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 table. And for whatever reason, the misspelling is likely to be with the end tag ... </tabel>. I've learned the hard way about this mistake.

Go slow when building tables. 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. 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.

Use W3C Markup Validation Service early and often.

Build your Cascading Style Sheets slowly.

Use W3C CSS Validation Service early and often.

Test and preview your layout as you proceed in order to catch errors early in the design process.

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.

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.

Get Started: Ask for help.

Another tree, where is it?