Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to-maintain document. They are also useful because they provide specialized elements to which you can attach CSS styles. Finally, lists help visitors read your web site, and they simplify maintenance when your pages need to be updated. Tables are also an extremely neat way to organise information for your consumer. :-)
| Tags | Definition |
|---|---|
<ol>...</ol> |
The ol tag defines an ordered list. An ordered list can be numerical or alphabetical. |
<ul>...</ul> |
The ul tag defines an unordered (bulleted) list. |
<li>...</li> |
The li tag defines a list item. The li tag is used in ordered lists(ol), unordered lists (ul). |
<table>...</table> |
The table tag defines an HTML table. An HTML table consists of the table element and one or more tr, th, and td elements. A more complex HTML table may also include col, colgroup, thead, tbody and tfoot elements.
|
<caption>...</caption> |
The caption tag defines a table caption (title). The caption tag must be inserted immediately after the table tag. |
<tr>...</tr> |
The tr tag defines a row in an HTML table. A tr element contains one or more th or td elements. |
<th>...</th> |
The th tag defines a header cell in an HTML table. The header cells contain header information (created with the th element). The text in th elements are bold and centered by default. |
<td>...</td> |
The td tag defines a standard cell in an HTML table. The standard cells contain data (created with the td element).The text in td elements are regular and left-aligned by default. |
<colspan="..."> |
The colspan attribute defines the number of columns a cell should span. |
<rowspan="..."> |
The rowspan attribute specifies the number of rows a cell should span. |
An HTML table is defined with the <table> tag. This tag shows. Each table row is defined with the <tr> tag This will show columns you are using. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. This is to show what comes inside your <tr> tag. For an example:
Tip, click the image to see a larger version.
Looks like this:
<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
To make a cell span more than one column, use the <colspan> attribute:
<table>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
Will look like this:
Likewise, to make a cell span more than one row, use the rowspan attribute:
<table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
which looks like this:
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. Ordered lists on the other hand start with <ol>. For an example, this:
Tip, click the image to see a larger version.
Is coded like this:
<h2>An Unordered HTML List</h2> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <h2>An Ordered HTML List</h2> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
See the Pen listsandtables by Sithum Dissanayake (@SithumD) on CodePen.
Sithum Dissanayake
@Coding_Flow