# HTML 106: How to create a Table in HTML

A quick refresher from our previous article:

## Refresher Quiz

<details data-node-type="hn-details-summary"><summary>What are ordered Lists?</summary><div data-type="detailsContent">Ordered lists, <code>ol</code> 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.</div></details><details data-node-type="hn-details-summary"><summary>How are ordered Lists structured?</summary><div data-type="detailsContent">When making an ordered list, you use the <code>ol</code> tag and then nest the <code>li</code> tags for each item.</div></details><details data-node-type="hn-details-summary"><summary>What are un-ordered Lists?</summary><div data-type="detailsContent">Unordered lists, <code>ul</code> are used when itemizing things without following any particular order. They appear as bullet points.</div></details><details data-node-type="hn-details-summary"><summary>How are un-ordered Lists structured?</summary><div data-type="detailsContent">When making an un-ordered list, you use the <code>ul</code> tag and then nest the <code>li</code> tags for each item.</div></details><details data-node-type="hn-details-summary"><summary>What are nested Lists?</summary><div data-type="detailsContent">When a list is embedded into another list, it becomes a subcategory and it is called a nested list.</div></details><details data-node-type="hn-details-summary"><summary>How are nested Lists structured?</summary><div data-type="detailsContent">You create a subcategory by nesting either an <code>ul</code> or an <code>ol</code> tag inside the specific list item you intend to create a sub-category of, then add list items as desired.</div></details><details data-node-type="hn-details-summary"><summary>What are description Lists?</summary><div data-type="detailsContent">Description lists are used to provide definitions or descriptions of terms.</div></details><details data-node-type="hn-details-summary"><summary>How are description Lists structured?</summary><div data-type="detailsContent">The basic structure is the <code>dl</code> 'description list' tags wrapping the <code>dt</code> 'description terms' tag and the <code>dd</code> 'description definition' tags, in pairs.</div></details>

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

```xml
<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:
    

```xml
<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:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712170494612/13b6fa08-c9ec-4e8d-b87e-8ea8d9a9e687.png align="center")

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:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712171748050/48474b31-5a50-4039-a1ae-9749d058274f.png align="center")

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:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712172102798/4dde331e-e927-46dc-ac18-e63883dba572.png align="center")