HTML 106: How to create a Table in HTML

A quick refresher from our previous article:

Refresher Quiz

What are ordered Lists?

Ordered lists, ol are lists that are ordered just as the name implies. They follow a certain numerical order and they are used to itemize things when it is important to follow a certain order.

How are ordered Lists structured?

When making an ordered list, you use the ol tag and then nest the li tags for each item.

What are un-ordered Lists?

Unordered lists, ul are used when itemizing things without following any particular order. They appear as bullet points.

How are un-ordered Lists structured?

When making an un-ordered list, you use the ul tag and then nest the li tags for each item.

What are nested Lists?

When a list is embedded into another list, it becomes a subcategory and it is called a nested list.

How are nested Lists structured?

You create a subcategory by nesting either an ul or an ol tag inside the specific list item you intend to create a sub-category of, then add list items as desired.

What are description Lists?

Description lists are used to provide definitions or descriptions of terms.

How are description Lists structured?

The basic structure is the dl 'description list' tags wrapping the dt 'description terms' tag and the dd 'description definition' tags, in pairs.

Tables in HTML

Tables are used to analyze data for display in a structured format for users to easily view them. Here is how tables are created in HTML:

We will create a summary of your profile at the top of the index.html page.
At the highest level, tables are wrapped in the table tag, with tr table rows nested into it. The first tr wraps a th or table heading, then the next sets of tr rows wrap table data or td, as many as required.
In your index.html file, edit your name and type 'Profile Summary' inside the h1 tags.
Create the basic skeleton of the table structure as follows:

<table>
    <tr>
        <th>
        </th>
        <th>
        </th>
    </tr>

    <tr>
        <td>
        </td>
        <td>
        </td>
    </tr>
</table>

These are the basic rules for creating tables:

You define rows to contain the various categories. The first row would hold the table headings, so in our case, we intend to have 2 headings, so we create 2 th elements under the first tr element
The table data is also defined inside rows, each row would contain 2 td elements to define the data corresponding to the 2 heading categories.
Add more rows as desired to add more information to your table, as follows:

<table>
      <tr>
        <th>Category</th>
        <th>Details</th>
      </tr>
      <tr>
        <td>Name</td>
        <td>Oloche Aboje</td>
      </tr>
      <tr>
        <td>Location</td>
        <td>United Kingdom</td>
      </tr>  
      <tr>
        <td>Occupation</td>
        <td>Front-End Developer</td>
      </tr>
      <tr>
        <td>Background</td>
        <td>Architecture, Web Development</td>
      </tr>
      <tr>
        <td>Skills</td>
        <td>Javascript, React</td>
      </tr>
    </table>

Here is a preview of the new table:

But we can format it a little more:

In the opening table tag, add a border attribute of value 1 to create cells for the table.
Next, in the opening tag of the table row tr for the heading, add an align attribute of value left.
In the opening tag of the table heading th, add an attribute of width and set it to a value of 100 for the first category heading and 200 for Details.

check out the preview:

I am not quite flowing with the cells, so I will just delete that attribute, and add a width attribute to the passport, and set the value to 200px to reduce it: