<table>

HTML (Table) Tag

Example

<table>
<thead>
  <tr>
    <th>Heading</th>
    <th>Heading</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Table data</td>
    <td>Table data</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td>Foot data</td>
    <td>Foot data</td>
  </tr>
</tfoot>
</table>

Try this code ❯

Meaning

The

element is used to define a table. Tables should be used to organize data.

The

element is a container for HTML table data, which is used to mark up tabular data. Tabular data is any data that can be systematically displayed in rows and columns.

Tables were often used for laying out web pages because tables helped fix the position of text on the page, however, this use has become an outdated. We recommend you use

and for fixed layouts. You can still use tables for tabular data.

You might find working with an HTML table editor easier than coding tables by hand, unless you are especially adept at visualizing table row and columns using the appropriate HTML tags. It is easy to miss or drop a tag when coding tables manually, which will cause your table to be malformed.

Notes:

• HTML table includes of one

element and one or more , , , , and elements.

Tip: You can omit

, , and elements.

Version: HTML 3.2, 4, 4.01, 5

---

Standard Syntax

<table>
<thead>
  <tr>
    <th>...</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>...</td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td>...</td>
  </tr>
</tfoot>
</table>

---

---

Advertisement

---

Global Attributes

The

,

and	elements. HTML table may also include

element also supports the Global Attributes in HTML.

---

Event Attributes

The

element also supports the Event Attributes in HTML.

---

More Examples

The following example show how to add CSS to table:

Example

`<style>`
table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table td, table th {
  border: 1px solid #E0E0E0;
  padding: 8px;
  padding: 5px 16px;
  font-weight: 400;
}

table th {
  background-color: #ddd;
  font-family: monaco;
}

table tr:nth-child(even){
  background-color: #f2f2f2;
}
`</style>`

Try this code ❯

---

By Default CSS Value(s)

Most of the browsers will display the

element with the following by default value(s)

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

---

Related Tags:

<caption>,
<col>,
<colgroup>,
<tbody>,
<td>,
<tfoot>,
<th>,
<thead> and
<tr>

❮ Previous: <svg> Next: <tbody> ❯

Advertisement