Menu Close

Articles

How to create a HTML table

HTML Table is a powerful composite element used to display data. The data is structured in rows and columns like in a database. Sometimes tables are dynamically generated by back-end but most of the time the tables are static.

The elements used for a table:

  • <table> – table main element
  • <thead> – contains table header
  • <tbody> – define table body
  • <tr> – define one row
  • <th> – define one header cell
  • <td> – define one detail cell

Let’s explore an example:

In the next example you can see the logical operations for a computer language. This table is called: Logical table of truth and is a basic thing you must grasp before starting to learn any programming language:

ABNOT ANOT BA AND BA OR B
TrueFalseFalseTrueFalseTrue
FalseTrueTrueFalseFalseTrue
FalseFalseTrueTrueFalseFalse
TrueTrueFalseFalseTrueTrue

Here is the HTML code:

Notes:

  • The <table> element contains all other elements,
  • We separate the header and body of the table using <thead> and <tbody>,
  • We create one row for header and many other rows using <tr> tag,
  • Every table row has one or more cells. These are created using <td> tags,
  • The header is using <th> tag for table cells.

Now you know how to create a table in HTML. For this particular table we have used attribute “class” to assign a style to the table. Therefore the aspect of this table is bordered and striped with alternative white and gray rows.

Read next: Understanding CSS notation