Creating Lists and Tables

There are 3 types of List in HTML:

• unordered list
• ordered list
• definition list

The last one is very rarely used, so we’re gonna talk about unordered list, ordered list, and tables.

Unordered Lists

To create an unordered list, we firstly need to create a container using <ul></ul> tags.
The second step is specifying list items using <li></li> tags.

Sample code:

Result:

• Strawberry
• Watermelon
• Blueberry

Ordered Lists

Creating an ordered list is almost the same as creating an unordered one.

Sample code:

Result:

1. Strawberry
2. Watermelon
3. Blueberry

Tables

A table in HTML is created row by row. Here are steps to create a table:

• Create a table container using <table></table> tags.
• Create table’s row(s) using <tr></tr> tags.
• Inside each row, add table’s data cell(s) using <td></td> tags.
• For the cells which you want to use as row headings or column headings, use th instead of td.

Sample code:

Result:

Name	Age	Place
Methuselah	4,800	California
Senator	3,500	Florida
Sarv-e Abarqu	4,000	Iran

There are also attributes which are used with <td> or <th> to expand cells by columns and rows. And here are reference links to the attributes:

• colspan attribute
• rowspan attribute

Comments

In the previous example, there was a line of code which has not appeared in the result:

<!-- The row above is for headings -->

This line is used for explanation in HTML document without affecting the output on webpage view. It is called a comment.

A comment in HTML is created using an opening tag <!-- and a ending tag -->.

Another benefit of using comments is to temporarily cancel a block of code without deleting or moving your code to another place.

Sample code:

Next: Text Formatters ;