HTML, CSS, JavaScript Tutorial

HTML Element: <table>

The HTML <table> element indicates a table. It typically includes one or more <tr> elements and, within them, <td> and/or <th> elements. More complicated table layouts can also include <caption>, <col>, <colgroup>, <tbody>, <tfoot> and <thead> elements.

The attributes it can take are HTML global attributes and HTML event attributes.

It used to support the align, bgcolor, border, cellpadding, cellspacing, frame, rules, summary and width attributes, but these are no longer supported by HTML 5. Original draft versions of HTML 5 also included a sortable attribute, but this appears to have been dropped in later specifications and not to have been implemented so far by major browsers.

To create or access such an element in JavaScript see here. The corresponding HTML DOM object supports standard DOM properties and methods. It also supports the following additional properties and methods:

Additional properties:

Property	Description	More
caption	Returns the <caption> element of the table	Here
rows	Returns a collection of the <tr> elements of the table	Here
tBodies	Returns a collection of <tbody> elements of the table	Here
tFoot	Returns the <tfoot> element of the table	Here
tHead	Returns the <thead> element of the table	Here

Additional methods:

Method	Description	More
createCaption()	Creates empty <caption> element and adds to table	Here
createTFoot()	Creates empty <tfoot> element and adds to table	Here
createTHead()	Creates empty <thead> element and adds to table	Here
deleteCaption()	Removes first <caption> element from table	Here
deleteRow()	Removes a <tr> element from table	Here
deleteTFoot()	Removes first <tfoot> element from table	Here
deleteTHead()	Removes <thead> element from table	Here
insertRow()	Creates empty <tr> element and adds to table	Here

The default style applicable to this element is shown here.

EXAMPLE:

HTML USED IN THIS EXAMPLE:

<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>
table,td,th,tr,caption {border: thin solid black; border-collapse: collapse;}
th {background-color: yellow;}
thead {color: blue}
tbody {color: black}
tfoot {color: green}
</style>
</head>
<body>
Created using HTML:<br>
<table>
  <caption>A table</caption>
  <thead>
    <tr><th>col1</th><th>col2</th></tr>
    <tr><td>1</td><td>2</td></tr>
  </thead>
  <tbody>
    <tr><td>A</td><td>B</td></tr>
  </tbody>
  <tfoot>
    <tr><td>a</td><td>b</td></tr>
  </tfoot>
</table>

<br>Created using JavaScript:<br>
<span id="element"></span>

<script>
var y1 = document.createElement("CAPTION"); y1.textContent = "A table";
var y2a1 = document.createElement("TH"); y2a1.textContent = "col1";
var y2a2 = document.createElement("TH"); y2a2.textContent = "col2";
var y2a = document.createElement("TR"); y2a.appendChild(y2a1); y2a.appendChild(y2a2);
var y2b1 = document.createElement("TD"); y2b1.textContent = "1";
var y2b2 = document.createElement("TD"); y2b2.textContent = "2";
var y2b = document.createElement("TR"); y2b.appendChild(y2b1); y2b.appendChild(y2b2);
var y2 = document.createElement("THEAD"); y2.appendChild(y2a); y2.appendChild(y2b);
var y3a1 = document.createElement("TD"); y3a1.textContent = "A";
var y3a2 = document.createElement("TD"); y3a2.textContent = "B";
var y3a = document.createElement("TR"); y3a.appendChild(y3a1); y3a.appendChild(y3a2);
var y3 = document.createElement("TBODY"); y3.appendChild(y3a);
var y4a1 = document.createElement("TD"); y4a1.textContent = "a";
var y4a2 = document.createElement("TD"); y4a2.textContent = "b";
var y4a = document.createElement("TR"); y4a.appendChild(y4a1); y4a.appendChild(y4a2);
var y4 = document.createElement("TFOOT"); y4.appendChild(y4a);
var x = document.createElement("TABLE");
x.appendChild(y1); x.appendChild(y2); x.appendChild(y3); x.appendChild(y4);
document.getElementById("element").appendChild(x);
</script>

</body>
</html>

NAVIGATION LINKS
Contents | Prev | Next | HTML Elements

Desktop view | Switch to Mobile