Lists and Tables


Lists
Tables


Lists
A list is one way of organizing data on your website. There are two types of lists, an unordered list, which indents each item in the list and adds a bullet, and an ordered list, which indents and numbers each item. To create a list, you will use the tags <ul> . . . </ul> to create an unordered list and the tags <ol> . . . </ol> to create an ordered list. Each item in the list will be enclosed by the tags <li> . . . </li>.
<html>
<head>

</head>
<body>

<ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
</ul>
</body>
</html>
 <html>
<head>

</head>
<body>

<ol>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
</ol>
</body>
</html>
Click here for an example of an unordered list Click here for an example of an ordered list

Changing the Bullets
If you are using an unordered list, you can choose from three different types of bullets:
  • Circle
  • Disc
  • Square
The default type of bullet for an unordered list is a disc. If you want to change the type of bullet to a circle or a square, you can use the type attribute. Setting type equal to square will generate a list with square bullets.
<ul type="square">
<li>Apples</li>
<li>Oranges</li>
<li>Grapes</li>
</ul>
  • Apples
  • Oranges
  • Grapes
If you are using an ordered list, you can change the type of number style using the type attribute. You can choose from the following types:
Number Style Result
A A,B,C...
a a,b,c...
I I,II,III...
i i,ii,iii...
1 1,2,3...
The default number style for ordered lists is 1,2,3. You can set type equal to any of the number styles in the above chart to change your list.
<ol type="I">
<li>Title Page</li>
<li>Table of Contents</li>
<li>Introduction</li>
</ol>
  1. Title Page
  2. Table of Contents
  3. Introduction
You can also change the number that your list begins with. You could, for example, begin your list at 4 instead of 1. To do this you need to use the start attribute.
<ol start="4">

Tables
A table is another method that you can use to organize data on your webpage. To create a table, you will begin with the tags <table> . . . </table>. There are two parts of a table that you must specify, table rows and table data. To create a new table row, use the tags <tr> . . . </tr>. Your table can have multiple rows. To create a piece of data for the table use <td> . . . </td>. Each row can have several data entries. You can also include blank table data tags (<td></td>) as placeholders.
<html>
<head>

</head>
<body>

<table>
<tr>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
</tr>
<tr>
<td>Thursday</td>
<td></td>
<td>Friday</td>
</tr>
</table>
</body>
</html>
Click here for an example
You can put almost anything into a table (text, lists, images, etc.). Just put the appropriate HTML tags between the table data tags.

Borders
You can add borders to your tables to separate each cell in the table. To add a border, use the border attribute of table and set it equal to a number, which will represent the thickness of the border in pixels.
<table border="2">
<tr>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
</tr>
<tr>
<td>Thursday</td>
<td>Friday</td>
</tr>
</table>
 <table border="8">
<tr>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
</tr>
<tr>
<td>Thursday</td>
<td>Friday</td>
</tr>
</table>
Click here for an example Click here for an example

Colors
You can change the background color of the entire table, of a row in the table, or a single data cell. To do this, you will use the bgcolor attribute with the appropriate tag.
<table border="2" bgcolor="#CC0055">
<tr>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
</tr>
<tr>
<td>Thursday</td>
<td>Friday</td>
</tr>
</table>
 <table border="2">
<tr bgcolor="#CC0055">
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
</tr>
<tr>
<td>Thursday</td>
<td>Friday</td>
</tr>
</table>
 <table border="2">
<tr>
<td bgcolor="#CC0055">Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
</tr>
<tr>
<td>Thursday</td>
<td>Friday</td>
</tr>
</table>
Click here for an example Click here for an example Click here for an example

Resizing
You can change the width and height of a table or the individual cells of the table. Like the image attributes, you can set width and height to a number that represents the size in pixels or a percent.
<table border="2">
<tr>
<td width="100" height="50">Monday</td>
<td width="250">Tuesday</td>
<td>Wednesday</td>
</tr>
<tr>
<td>Thursday</td>
<td>Friday</td>
</tr>
</table>
 Click here for an example

Aligning Data
You can align data horizontally and vertically inside each cell. Use the align attribute to align data vertically. Align can be set to left, right, or center.
<table border="2" width="400">
<tr><td align="right">Right</td></tr>
<tr><td align="left">Left</td></tr>
<tr><td align="center">Center</td></tr>
Click here for an example
Use valign to align data vertically. Valign can be set to top, middle, or bottom.
<table border="2" height="250">
<tr><td valign="bottom">Bottom</td></tr>
<tr><td valign="top">Top</td></tr>
<tr><td valign="middle">Middle</td></tr>
Click here for an example

Spanning Cells
You can combine two or more cells in a row or column to make one large cell. To do this you will use colspan and rowspan. Set these parameters to the number of rows or columns that you want the cell to "span".
<table border="2">
<tr>
<td colspan="3" align="center">Days of the Week</td>
</tr>
<tr>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
</tr>
<tr>
<td>Thursday</td>
<td>Friday</td>
</tr>
</table>
Click here for an example