DEV Community

jolamemushaj
jolamemushaj

Posted on

11 3 1 2 1

Html tables

A table is a data structure used to organize information. Html tables are used to help web developers organize data in rows and columns. Each row represents a unique record, and each column represents a field in the record.

The first thing we need to be clear about, is that creating tables consists of three main sections, which are: header, body, footer. To create the table we will use different tags, where the main one is <table> </table>. This tag wraps around the entire table. To create the table border the tag would be <table border = "1px"> </table>and it will add a border around each cell of the table.

  • The head of the table is created via the <thead> </thead> element. The <tr> tag is used to create table rows and the <th> tag is used to create table headings. If the width of the table headings needs to be specific, all we have to do is type <th width = ""> and put the width we want between the quotes. An example of code, written to create a table header is as follows:
<thead>
    <tr>
        <th width="100">Name</th>
        <th width="100">Gender</th>
        <th width="100">Age</th>
    </tr>
</thead>
Enter fullscreen mode Exit fullscreen mode
  • The body of the table is created through the <tbody> </tbody> element, which contains the main information of the table. The <td> tag is used to create table data cells. An example of code, written to create a table body is as follows:
<tbody>
    <tr>
        <td>Bill</td>
        <td>Male</td>
        <td>37</td>
    </tr>
    <tr>
        <td>Jessica</td>
        <td>Female</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Richard</td>
        <td>Male</td>
        <td>18</td>
    </tr>
</tbody>
Enter fullscreen mode Exit fullscreen mode
  • The end of the table closes with <tfoot> </tfoot>, which creates a separete footer for the table.
<tfoot>
    <tr>
        <th colspan="3">List of people</th>
    </tr>
</tfoot>
Enter fullscreen mode Exit fullscreen mode

The table we created will look like this:
Html tables

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (1)

Collapse
 
holy_whip profile image
Adesite Elisha

You have a YouTube channel or where I see a practical video to guide me ?

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay