🔥Limited Offer: Get 50% OFFon AI & Full Stack Courses🔥
Back to HTML Notes
Topic #28

HTML Tables

HTML Notes · CodingNow 2.03 min readSource

HTML tables allow web developers to arrange data into rows and columns.

Example

<table class="ws-table-all" id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

Example

<table>

<tr>
    <th>Company</th>

    <th>Contact</th>
    <th>Country</th>

</tr>

<tr>
    <td>Alfreds Futterkiste</td>

    <td>Maria
  Anders</td>
    <td>Germany</td>

</tr>
  <tr>
    <td>Centro
  comercial Moctezuma</td>

    <td>Francisco
  Chang</td>
    <td>Mexico</td>

  </tr>
</table>

Table Cells

Each table cell is defined by a <td> and a </td> tag.

Note: td stands for table data.

Everything between <td> and </td> is the content of a table cell.

Example

<table>

<tr>
    <td>Emil</td>

    <td>Tobias</td>
    <td>Linus</td>

</tr>
</table>

Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.

Note: tr stands for table row.

Example

<table>

<tr>
    <td>Emil</td>

    <td>Tobias</td>
    <td>Linus</td>

</tr>

<tr>
    <td>16</td>

    <td>14</td>
    <td>10</td>

</tr>
</table>

You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.

Note: There are times when a row can have fewer or more cells than another. You will learn about that in a later chapter.

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:

Note: th stands for table header.

Example

<table>

<tr>
    <th>Person 1</th>

    <th>Person 2</th>
    <th>Person
  3</th>

</tr>

<tr>
    <td>Emil</td>

    <td>Tobias</td>
    <td>Linus</td>

</tr>

<tr>
    <td>16</td>

    <td>14</td>
    <td>10</td>

</tr>
</table>

By default, the text in <th> elements are bold and centered, but you can change that with CSS.

HTML Table Tags

Tag Description
element
Defines a table
Defines a header cell in a table
Defines a row in a table
Defines a cell in a table
Defines a table caption
Specifies a group of one or more columns in a table for formatting
Specifies column properties for each column within a
Groups the header content in a table
Groups the body content in a table
Groups the footer content in a table

Note: For a complete list of all available HTML tags, visit our HTML Tag Reference.

LEARN MORE

Styling Tables Filter Table Sort Table Responsive Table Zebra Striped Table

PreviousHTML Page TitleNext Table Borders

Want to go beyond the notes?

Join CodingNow 2.0's HTML course — live mentorship, real projects, and 100% placement support.

Enroll Now — Free Demo Available

HTML Tables – FAQs

Quick answers about learning HTML Tables in HTML.

This free note from CodingNow 2.0 explains HTML Tables in HTML — concept, syntax and worked code examples you can copy, run and revise before interviews.
Yes. Every HTML topic on CodingNow 2.0, including HTML Tables, is 100% free with no signup required.
With focused practice, most students grasp HTML Tables in 1–3 days from these notes; pairing it with CodingNow 2.0's mentor-led course takes you to job-ready depth faster.
Use the code examples in this note, then ask doubts for free on the CodingNow 2.0 Community (/community) — expert instructors answer within 24 hours.
WhatsApp
Call NowEnroll Now