How to create tables in HTML

H
andrewgbliss
6 months ago

This article will go over how to create tables in HTML

. . .

Github repo

https://github.com/EntryLevelDeveloperTraining/html-workshop

What is a table?

A table is a spreadsheet like grid, with rows and columns, that renders complex data. For instance, a list of books, by name, author, and date. We can setup column headers that show the title, and then render each book as a row in that table.

Table Tags

Let's go over the common table tags and how we can use them to render a table.

  • table - The main table tag
  • thead - The table header tag
  • tbody - The body of the table that will show each row
  • tr - The tag that will define each row of data
  • th - The tag that specificies the header title of each column
  • td - The tag that contains the data such as book name, author, or date

Example

Here is an example of an HTML table show books and authors:

<table border="1">
  <thead>
    <tr>
      <th>Title</th>
      <th>Author</th>
      <th>Release Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Book 1</td>
      <td>John Johnson</td>
      <td>01/01/2021</td>
    </tr>
    <tr>
      <td>Book 2</td>
      <td>John Johnson</td>
      <td>01/01/2021</td>
    </tr>
    <tr>
      <td>Book 3</td>
      <td>John Johnson</td>
      <td>01/01/2021</td>
    </tr>
  </tbody>
</table>

Conclusion

Tables are very useful in creating a spreadsheet like grid of rows and columns, and showing data to the user in a clean way.


H
andrewgbliss
6 months ago