A quick refresher from our previous article:

Refresher Quiz

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: