How To Create HTML Tables (Very Simple Examples)

Welcome to a quick tutorial and examples on how to create HTML tables, and I suppose that everyone has seen tables everywhere online. But what is actually happening behind the scenes? How are tables created in HTML?

That covers the quick basics, but there are more to HTML tables – Read on for more examples!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/create-html-tables/” title=”How To Create HTML Tables (Simple Examples)” poster=”https://code-boxx.com/wp-content/uploads/2022/03/STORY-HTML-20230505.webp” width=”360″ height=”600″ align=”center”]

 

TABLE OF CONTENTS

Download & Notes	HTML Tables	Useful Bits & Links
The End

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

1) CREATING A BASIC HTML TABLE

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Jon Doe</td>
    <td>jon@doe.com</td>
  </tr>
  <tr>
    <td>Joy Doe</td>
    <td>joy@doe.com</td>
  </tr>
</table>

• <table> The table itself.
• <tr> represents a table row.
• <th> represents a header cell.
• <td> is a normal table cell.

Yes, these 4 tags are all you need to create a basic HTML table… Although <th> is kind of optional.

 

2) TABLE SECTIONING – HEAD, BODY, FOOT

<style>
thead { background-color:lightsalmon }
tbody { background-color:lightyellow }
tfoot { background-color:lightblue }
</style>

<table>
  <!-- (A) HEAD SECTION -->
  <thead>
    <tr> <th>Head 1</th> <th>Head 2</th> </tr>
  </thead>
 
  <!-- (B) BODY SECTION -->
  <tbody>
    <tr> <td>Cell 1</td> <td>Cell 2</td> </tr>
    <tr> <td>Cell 3</td> <td>Cell 4</td> </tr>
  </tbody>
 
  <!-- (C) FOOT SECTION -->
  <tfoot>
    <tr> <td>Cell 5</td> <td>Cell 6</td> </tr>
    <tr> <td>Cell 7</td> <td>Cell 8</td> </tr>
  </tfoot>
</table>

This one should be pretty self-explanatory as well, we are simply grouping the table rows <tr> into sections with <thead>, <tbody> and <tfoot>. Although this is completely optional, it is pretty useful for styling and organization purposes.

 

 

3) COLUMN GROUPING

<table>
  <!-- (A) COLUMN GROUPING -->
  <colgroup>
    <col span="2" style="background-color:lightsalmon">
    <col style="background-color:lightyellow">
    <col style="background-color:lightblue">
  </colgroup>

  <!-- (B) ROWS AS USUAL -->
  <tr>
    <th>First Column</th>
    <th>Second Column</th>
    <th>Third Column</th>
    <th>Fourth Column</th>
  </tr>
  <tr>
    <td>First Cell</td>
    <td>Second Cell</td>
    <td>Third Cell</td>
    <td>Fourth Cell</td>
  </tr>
</table>

The previous example demonstrated how to group rows together, and yes, we can group columns too.

• Define a column group <colgroup> right after the opening <table> tag.
• Accompany it with placing the corresponding column <col> tags inside – How many columns to span and the styles.

 

4) SPANNING ACROSS ROWS & COLUMNS

<table>
  <tr>
    <th>First Column</th>
    <th colspan="2">Span 2 columns</th>
  </tr>
  <tr>
    <td rowspan="2">Span 2 rows</td>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>

• To span a cell across multiple columns, we add a colspan attribute.
• To span a cell across multiple rows, we add a rowspan attribute.

Easy?

 

 

5) TABLE CAPTION

<table>
  <caption>Animals</caption>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Doge</td>
    <td>Good boy.</td>
  </tr>
  <tr>
    <td>Cate</td>
    <td>Evil one.</td>
  </tr>
</table>

The <caption> tag adds a description to the table, and it must be right under the main <table> tag. Not very useful though… Most people will just use a header <h1> tag.

 

6) TABLE-IN-TABLE

<table>
  <tr>
    <td>First Cell</td>
    <td>Second Cell</td>
  </tr>
  <tr>
    <td>Third Cell</td>
    <td>
      <table>
        <tr><td>TABLE-IN-TABLE</td></tr>
        <tr><td>ANOTHER ROW</td></tr>
      </table>
    </td>
  </tr>
</table>

Finally, for you guys who are curious – Yes, we can put a table inside a table.

 

 

 

SUMMARY – TABLE TAGS

Tag	Description
<table>	The “root” table tag.
<tr>	Table row.
<th>	Header cell.
<td>	Table cell.
<thead>	Head section.
<tbody>	Body section.
<tfoot>	Foot section.
<colgroup>	Column group, accompanied by <col>.
<col>	A column group definition.
<caption>	Table caption. Must be the first child after the <table> tag.

 

SUMMARY – ATTRIBUTES

Attribute	Description
style	Defines the style. Can actually be added to almost any HTML tag.
colspan	How many columns a cell <th> or <td> spans across.
rowspan	How many rows a cell <th> or <td> spans across.
span	For <col> tags. How many columns the group spans across.

 

LINKS & REFERENCES

• Tables – HTML Reference
• Responsive CSS Tables – Code Boxx

 

INFOGRAPHIC CHEAT SHEET