Creating Lists and Tables

Lists and tables are essential elements of any web page, and they are used to organize and present data in a clear and concise manner. In this article, we’ll take a closer look at how to create lists and tables in HTML.

Creating Lists

There are three types of lists in HTML: ordered lists, unordered lists, and definition lists.

Ordered lists are used to display a list of items in a specific order, and they are denoted by the <ol> element. Each item in the list is represented by a <li> element.

Here’s an example of how to create an ordered list in HTML:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

In this example, we have created an ordered list using the <ol> element, and we have added three items to the list using the <li> element. The list will be displayed with numbers corresponding to the order of the items.

Unordered lists are used to display a list of items in no particular order, and they are denoted by the <ul> element. Each item in the list is represented by a <li> element.

Here’s an example of how to create an unordered list in HTML:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

In this example, we have created an unordered list using the <ul> element, and we have added three items to the list using the <li> element. The list will be displayed with bullet points corresponding to the items.

Definition lists are used to display a list of terms and their definitions, and they are denoted by the <dl> element. Each term is represented by a <dt> element, and each definition is represented by a <dd> element.

Here’s an example of how to create a definition list in HTML:

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
  <dt>Term 3</dt>
  <dd>Definition 3</dd>
</dl>

Creating Tables

Tables are used to display data in rows and columns, and they are denoted by the <table> element.

To create a table in HTML, you need to use the following elements:

• <table>: the main container for the table
• <tr>: a row in the table
• <th>: a table header cell
• <td>: a table data cell

Here’s an example of how to create a basic table in HTML:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Gender</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
    <td>Male</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
    <td>Female</td>
  </tr>
</table>

In this example, we have created a table using the <table> element, and we have added three rows to the table using the <tr> element. Each row has three cells, which are defined using the <th> and <td> elements. The <th> element is used for the table header cells, and the <td> element is used for the table data cells.

Styling Tables

You can use CSS to style your tables and make them more visually appealing. Some common properties that you can use to style tables include:

• border: adds a border to the table
• border-collapse: specifies whether the table borders should be collapsed into a single border or separated into individual borders
• width: specifies the width of the table
• height: specifies the height of the table

Here’s an example of how to use CSS to style a table:

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  width: 100%;
  height: 200px;
}

In this example, we have applied the styles of a 1 pixel solid border with a color of #ccc, collapsed borders, a width of 100%, and a height of 200 pixels to the table using the border, border-collapse, width, and height properties.

Conclusion

Lists and tables are essential elements of any web page, and they are used to organize and present data in a clear and concise manner. With the skills and knowledge you gain in this course, you’ll be able to create professional-quality lists and tables that are easy to read and understand. You can also use CSS to style your lists and tables and make them more visually appealing.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
  <dt>Term 3</dt>
  <dd>Definition 3</dd>
</dl>