Web Design/Lists and Tables

While HTML is primarily concerned with semantic formatting of the content of a document, and less concerned with its style, there are situations where the meaning of some text is denoted by its presentation. Tables are widely used to organize the text visually on the screen, showing a relationship of some kind and demonstrating the meaning of the text. This activity will:


 * Familiarize you with tables and lists in html.

It will be assumed you:


 * Can identify HTML elements, attributes and their values.

This activity is not designed to:


 * Give a comprehensive list of elements, attributes or their accepted values.
 * Discuss document type, the meta element, or comments.

Lists
HTML allows you to easily set apart lists from the rest of your content with one of three different list types: Unordered (bulleted), ordered (numbered) and definition lists. Different kinds of lists can be nested to form an outline.

Unordered List
The unordered, or bulleted, list is formed using two elements. The list itself is defined using an unordered list element, and each item is marked using a list item element:  Item Item Item 
 * Item
 * Item
 * Item

Ordered List
The ordered, or numbered, list is formed similarly to the unordered list using an ordered list element and the list item element from before. The ordered list element also has a handy start attribute that allows you to set a starting number other than 1.  Item Item Item 
 * 1) Item
 * 2) Item
 * 3) Item

Definition List
The definition list is a slight departure from the two. While it uses an opening and closing definition list element similarly, it has two different elements for the items in the list. The first is the term element for the definition list and the second is the definition element for the definition list. <dl> <dt>Item</dt> <dd>The item's definition.</dd> <dt>Item</dt> <dd>The item's definition.</dd> </dl>
 * Item : The item's definition.
 * Item : The item's definition.

Try it!
Let's try making this simple outline using nested lists. Try to duplicate these results without peeking at my source below.

<li>Get mail. <li>Shop for office supplies. <ul> <li>Printer paper. <li>Toner. </ul> <li>Deliver mail and supplies. </ol>

Here is one way to reproduce this list: <li>Get mail.</li> <li>Shop for office supplies.</li> <ul> <li>Printer paper.</li> <li>Toner.</li> </ul> <li>Deliver mail and supplies.</li> </ol>

Tables
In HTML tables are set up similarly to lists, but are rendered differently and can be confusing early on. Tables are built using a number of elements. The table is first defined by the table element, then each row is defined by a table row element, and finally each cell within each row is defined by a table cell. There are additional elements that can be used to define tables, but some are not fully supported.

Try it!
Open up your text editor and type the above table example. Save it as 'table.html' and open it in your web browser.

A table generally 'shrinks' to fit its contents, but the width attribute allows you to specify either a number of pixels or a percentage of the are the table is in as the width. Save and refresh your browser. You should notice several things. The table takes up 80% of the page in width, the border is noticeably thick and has a 3D beveled appearance, and the background of the table is yellow. The background color attribute will accept either hex values or the name of some colors. To finish this activity, make it a three by three table and give the center-most cell a green background.

And this is how I did it: Table Example