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:
|
|
|
| <ul type="square"> <li>Apples</li> <li>Oranges</li> <li>Grapes</li> </ul> |
|
| Number Style | Result |
|---|---|
| A | A,B,C... |
| a | a,b,c... |
| I | I,II,III... |
| i | i,ii,iii... |
| 1 | 1,2,3... |
| <ol type="I"> <li>Title Page</li> <li>Table of Contents</li> <li>Introduction</li> </ol> |
|
| <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> |
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="black"> <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> |
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> |
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 |
