# Web Design/Lists and Tables

Web Design → Lists and Tables
This page is part of the Web Design project. :
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:
It will be assumed you:
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

### 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

### 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.

#### 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.
* Get mail.
* Shop for office supplies.
** Printer paper.
** Toner.
* Deliver mail and supplies.
Here is one way to reproduce this list:

## 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.
You may also want to have more control over the border. The border attribute specifies the width of the border in pixels. The Setting the border attribute to 0 will 'turn off' the border.

### Try it!

Let's open up our 'table.html' and alter our table a bit.
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.
| Top left. | Top middle. | Top right. |
| Middle left. | Center. | Middle right. |
| Lower left. | Lower middle. | Lower right. |
And this is how I did it: