Lesson 11 of 24
In Progress

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.

How do you create an ordered list in HTML?

To create an ordered list in HTML, use the <ol> element and add each item to the list using the <li> element. For example:

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

How do you create an unordered list in HTML?

To create an unordered list in HTML, use the <ul> element and add each item to the list using the <li> element. For example:

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

How do you create a definition list in HTML?

To create a definition list in HTML, use the <dl> element and add each term and definition using the <dt> and <dd> elements. For example:

<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>

What elements do you need to use to create a table in HTML?

To create a table in HTML, you need to use the <table> element for the main container, the <tr> element for each row, the <th> element for the table header cells, and the <td> element for the table data cells.

What are some common CSS properties that you can use to style tables?

Some common CSS properties that you can use to style tables include border, border-collapse, width, and height.