Module 1

1.4 HTML list 

How To Make an HTML List

In web design, there are 3 different types of lists which you may wish to add to your site.

Ordered List

The first is an <ol>: This is an ordered list of contents. For example:

1. An item

2. Another item

3. Another goes here.

Inside the <ol> tag we list each item on the list inside <li> </li> tags.

For example:

<ol>

<li>An item </li>

<li>Another item </li>

<li>Another goes here </li>

</ol>

Unordered List

The second type of list that you may wish to include is an <ul> unordered list. This is better known as a bullet point list and contains no numbers.

An example of this is:

<ul>

<li>This is </li>

<li>An Unordered </li>

<li>List </li>

</ul>

Definition List

Finally, you may wish to include a definition list <dl> on your page. An example of a <dl> list is as follows:

HTML

Hypertext markup language is a programming language used to create web pages and is rendered by a web browser.

The code used for the above is as follows:

<dl>

<dt>Item</dt>

<dd>The definition goes here</dd>

</dl>

Let’s try it out. Open index.html and on a new line, enter the following HTML:

<p>This website will have the following benefits for my business:</p>

<ul>

<li>Increased traffic </li>

<li>Global Reach</li>

<li>Promotional Opportunities</li>

</ul>

Now hit save and check out the results in your browser. If everything worked out then it will display a bullet-pointed table displaying the information above.

How To Add Tables In HTML

ables can be styled in various ways – Codepen.io offers live previews to keep track of changes.

Another way to keep your website looking neat and orderly is through the use of a table.

Do not use a table to layout your website. Search engines hate it and it is generally a bad idea. Just… don’t. See our CSS tutorial, instead.

This is definitely the most complicated part of this tutorial, however, learning it will certainly pay off in the long-run.

With this in mind, tables can still be a useful way to present content on your page.

What Does a Table Consist Of?

When drawing a table we must open an element with the <table> opening tag. Inside this tag, we structure the table using the table rows, <tr>, and cells, <td>.

An example of an HTML table is as follows:

<table>

<tr>

<td>Row 1 - Column 1</td>

<td>Row 1 - Colunm 2 </td>

<td>Row 1 - Column 3 </td>

</tr>

<tr>

<td>Row 2 - Column 1</td>

<td>Row 2 - Column 2</td>

<td>Row 2 - Column 3</td>

</tr>

</table>

This will produce a 2-row table with 3 cells in each row.

Tables can get quite complicated, so be sure to check out our special HTML tables tutorial.

Table Tags

However, watch out for these tags so that you can recognize them and use them as your skills develop.

Here are the tables tags presented in a table – pun totally intended.

Let’s Make a Table

Go to a new line on the index.html page within your text editor. Enter the following HTML code:

<table>

<tr>

<td>Row 1 - Column 1</td>

<td>Row 1 - Column 2 </td>

</tr>

<tr>

<td>Row 2 - Column 1</td>

<td>Row 2 - Column 2</td>

</tr>

</table>

Hit save and preview it in your browser.

Congratulations: You did it!