Section B.5. Creating Lists and Tables

B.5. Creating Lists and Tables

Lists are both quick and easy. There are two kinds of lists: ordered (that is, numbered) and unordered (that is, bulleted). First, specify which kind of list you want:

• Ordered list: <ol></ol>

• Unordered list: <ul></ul>

Then, between the opening and closing list tags, introduce each new item on the list with a list item < li > tag. Here's an example; the results are in Figure B-5:

 <ol> <li>Here's <li>a <li>numbered lt;li>list. lt;/ol> lt;ul> <li>Here's <li>a <li>bulleted <li>list. </ul> 

Figure B-5. The <ol> tag defines an automatically numbered list. The <ul> tag defines a bulleted list.

By the way, you don't have to put each tag on its own line. You could just as easily write the HTML like this:

 <ol><li>Here's<li>a<li>numbered<li>list.</ol>< ul><li>Here's<li>a<li>  bulleted<li>list.</ul> 

The code without line breaks is harder for humans to read, but browsers ignore line breaks in your HTML document (unless you type them in using the < br > or the < p > tag). So it doesn't matter how many times you hit Enter; the list appears the same as it does if you mushed everything together on one line. Because you're a human, though, when you're typing a list into an HTML document, it's easier to read your work if you put each list item on its own line.

B.5.1. Tables

Because HTML ignores spaces and line breaks, you need a special format if you want to control layout and positioning precisely. For example, if you want to create nice neat rows and columns , you have to use the < table > tag. No big surprise here: the tags for defining a table are < table > and </ table >. When you're making a table, make the rows first (each row is marked with < tr > and </ tr >), then add the text in each column using the table data tag: < td ></ td >.

Here's a simple example to create a three-row, three-column table of names ; Figure B-6 shows you how it comes out:

 <table> <tr> <td>Steve</td> <td>Mbaki</td> <td>Tamsen</td> </tr> <tr> <td>Harold</td>   <td>Lois</td> <td>Wolfgang</td> </tr> <tr> <td>Fumiko</td> <td>Sarah</td> <td>Pavarti</td> </tr> </table> 

Figure B-6. This collection of names almost doesn't look like a table because nothing lines up.

Notice that the rows and columns, shown in Figure B-6, turned out a little crowded.To make your table look neater, add some cell padding and a border. To do so, change the first line of the table HTML from < table > to <table cellpadding ="10" border="1"> , keeping everything else the same. Just look at the difference (shown in Figure B-7).

Note: The border attribute sets the border width in pixels , a tiny width used to measure onscreen elements. Use 1 for a narrow border and 10 or 20 for a wide one. The cellpadding attribute sets the spacing between the cell walls and what's inside the cells ; use a low number for a smaller, tighter table and a higher number for a roomy one.

Figure B-7. Adding some padding and a border to each table cell results in a nicely formatted table. If you want to make the border invisible, set the border attribute to zero, like this: border="0".