HTML
Living Standard — Last Updated 12 July 2025
Living Standard — Last Updated 12 July 2025
table elementcaption elementcolgroup elementcol elementtbody elementthead elementtfoot elementtr elementtd elementth elementtd and th elementstable elementSupport in all current engines.
Support in all current engines.
caption element, followed by zero or more
colgroup elements, followed optionally by a thead element, followed by
either zero or more tbody elements or one or more tr elements, followed
optionally by a tfoot element, optionally intermixed with one or more
script-supporting elements.[Exposed =Window ]
interface HTMLTableElement : HTMLElement {
[HTMLConstructor ] constructor ();
[CEReactions ] attribute HTMLTableCaptionElement ? caption ;
HTMLTableCaptionElement createCaption ();
[CEReactions ] undefined deleteCaption ();
[CEReactions ] attribute HTMLTableSectionElement ? tHead ;
HTMLTableSectionElement createTHead ();
[CEReactions ] undefined deleteTHead ();
[CEReactions ] attribute HTMLTableSectionElement ? tFoot ;
HTMLTableSectionElement createTFoot ();
[CEReactions ] undefined deleteTFoot ();
[SameObject ] readonly attribute HTMLCollection tBodies ;
HTMLTableSectionElement createTBody ();
[SameObject ] readonly attribute HTMLCollection rows ;
HTMLTableRowElement insertRow (optional long index = -1);
[CEReactions ] undefined deleteRow (long index );
// also has obsolete members
};The table element represents data with more than one dimension, in
the form of a table.
The table element takes part in the table
model. Tables have rows, columns, and cells given by their descendants. The rows and
columns form a grid; a table's cells must completely cover that grid without overlap.
Precise rules for determining whether this conformance requirement is met are described in the description of the table model.
Authors are encouraged to provide information describing how to interpret complex tables. Guidance on how to provide such information is given below.
Tables must not be used as layout aids. Historically, some web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results. In particular, users of accessibility tools like screen readers are likely to find it very difficult to navigate pages with tables used for layout.
There are a variety of alternatives to using HTML tables for layout, such as CSS grid layout, CSS flexible box layout ("flexbox"), CSS multi-column layout, CSS positioning, and the CSS table model. [CSS]
Tables can be complicated to understand and navigate. To help users with this, user agents should clearly delineate cells in a table from each other, unless the user agent has classified the table as a (non-conforming) layout table.
Authors and implementers are encouraged to consider using some of the table design techniques described below to make tables easier to navigate for users.
User agents, especially those that do table analysis on arbitrary content, are encouraged to find heuristics to determine which tables actually contain data and which are merely being used for layout. This specification does not define a precise heuristic, but the following are suggested as possible indicators:
It is quite possible that the above suggestions are wrong. Implementers are urged to provide feedback elaborating on their experiences with trying to create a layout table detection heuristic.
If a table element has a (non-conforming) summary attribute, and the user agent has not classified the
table as a layout table, the user agent may report the contents of that attribute to the user.
table.caption [ = value ]Support in all current engines.
Returns the table's caption element.
Can be set, to replace the caption element.
caption = table.createCaption()HTMLTableElement/createCaption
Support in all current engines.
Ensures the table has a caption element, and returns it.
table.deleteCaption()HTMLTableElement/deleteCaption
Support in all current engines.
Ensures the table does not have a caption element.
table.tHead [ = value ]Support in all current engines.
Returns the table's thead element.
Can be set, to replace the Support in all current engines. Ensures the table has a Support in all current engines. Ensures the table does not have a Support in all current engines. Returns the table's Can be set, to replace the Support in all current engines. Ensures the table has a Support in all current engines. Ensures the table does not have a Support in all current engines. Returns an Support in all current engines. Creates a Support in all current engines. Returns an Support in all current engines. Creates a The position is relative to the rows in the table. The index −1, which is the default
if the argument is omitted, is equivalent to inserting at the end of the table. If the given position is less than −1 or greater than the number of rows, throws an
" Support in all current engines. Removes the The position is relative to the rows in the table. The index −1 is equivalent to
deleting the last row of the table. If the given position is less than −1 or greater than the index of the last row, or if
there are no rows, throws an " In all of the following attribute and method definitions, when an element is to be
table-created, that means to create an element given the
The The The The The The The The The The The The The behavior of the When the If index is less than −1 or greater than or equal to the number of
elements in the Otherwise, remove the indexth element
in the Here is an example of a table being used to mark up a Sudoku puzzle. Observe the lack of
headers, which are not necessary in such a table. For tables that consist of more than just a grid of cells with headers
in the first row and headers in the first column, and for any table in general where the reader
might have difficulty understanding the content, authors should include explanatory information
introducing the table. This information is useful for all users, but is especially useful for
users who cannot see the table, e.g. users of screen readers. Such explanatory information should introduce the purpose of the table, outline its basic cell
structure, highlight any trends or patterns, and generally teach the user how to use the
table. For instance, the following table: ...might benefit from a description explaining the way the table is laid out, something like
"Characteristics are given in the second column, with the negative side in the left column and the
positive side in the right column". There are a variety of ways to include this information, such as: Authors may also use other techniques, or combinations of the above techniques, as
appropriate. The best option, of course, rather than writing a description explaining the way the table is
laid out, is to adjust the table such that no explanation is needed. In the case of the table used in the examples above, a simple rearrangement of the table so
that the headers are on the top and left sides removes the need for an explanation as well as
removing the need for the use of Good table design is key to making tables more readable and usable. In visual media, providing column and row borders and alternating row backgrounds can be very
effective to make complicated tables more readable. For tables with large volumes of numeric content, using monospaced fonts can help users see
patterns, especially in situations where a user agent does not render the borders. (Unfortunately,
for historical reasons, not rendering borders on tables is a common default.) In speech media, table cells can be distinguished by reporting the corresponding headers before
reading the cell's contents, and by allowing users to navigate the table in a grid fashion, rather
than serializing the entire contents of the table in source order. Authors are encouraged to use CSS to achieve these effects. User agents are encouraged to render tables using these techniques whenever the page does not
use CSS and the table is not classified as a layout table. Support in all current engines. Support in all current engines. The The When a A caption can introduce context for a table, making it significantly easier to understand. Consider, for instance, the following table: In the abstract, this table is not clear. However, with a caption giving the table's number
(for reference in the main prose) and explaining its use, it
makes more sense: This provides the user with more context: Table 1.
This table shows the total score obtained from rolling two
six-sided dice. The first row represents the value of the first
die, the first column the value of the second die. The total is
given in the cell that corresponds to the values of the two dice.
Support in all current engines. Support in all current engines. The If the The The Support in all current engines. If a The element may have a The Support in all current engines. Support in all current engines. The
The The Returns an Creates a The position is relative to the rows in the table section. The index −1, which is the
default if the argument is omitted, is equivalent to inserting at the end of the table
section. If the given position is less than −1 or greater than the number of rows, throws an
" Removes the The position is relative to the rows in the table section. The index −1 is equivalent
to deleting the last row of the table section. If the given position is less than −1 or greater than the index of the last row, or if
there are no rows, throws an " The The If index is less than −1 or greater than the number of elements in the
If index is −1 or equal to the number of items in the Otherwise, insert table row as a
child of this element, immediately before the indexth Return table row. The If index is less than −1 or greater than or equal to the number of
elements in the Otherwise, remove the indexth element
in the Support in all current engines. The The This example shows a Support in all current engines. The The Support in all current engines. Support in all current engines. The The Support in all current engines. Returns the position of the row in the table's Returns −1 if the element isn't in a table. Returns the position of the row in the table section's Returns −1 if the element isn't in a table section. HTMLTableRowElement/insertCell Support in all current engines. Creates a The position is relative to the cells in the row. The index −1, which is the default
if the argument is omitted, is equivalent to inserting at the end of the row. If the given position is less than −1 or greater than the number of cells, throws an
" Removes the The position is relative to the cells in the row. The index −1 is equivalent to
deleting the last cell of the row. If the given position is less than −1 or greater than the index of the last cell, or
if there are no cells, throws an " The The The The If index is less than −1 or greater than the number of elements in
the If index is equal to −1 or equal to the number of items in Otherwise, insert table cell as a
child of this Return table cell. The If index is less than −1 or greater than or equal to the number of
elements in the Otherwise, remove the indexth element
in the Support in all current engines. Support in all current engines. The
The The User agents, especially in non-visual environments or where displaying the table as a 2D grid
is impractical, may give the user context for the cell when rendering the contents of a cell; for
instance, giving its position in the table model, or listing the cell's header cells
(as determined by the algorithm for assigning header cells). When a cell's header
cells are being listed, user agents may use the value of In this example, we see a snippet of a web application consisting of a grid of editable cells
(essentially a simple spreadsheet). One of the cells has been configured to show the sum of the
cells above it. Three have been marked as headings, which use Support in all current engines. The The The The attribute's missing value default and invalid value default are both the Auto state. (In this state the header cell applies to a
set of cells selected based on context.) A The The The following example shows how the Here is a markup fragment showing a table: This would result in the following table: The headers in the first row all apply directly down to the rows in their column. The headers with a The remaining headers apply just to the cells to the right of them. The The These attributes give the number of columns and rows respectively that the cell is to span.
These attributes must not be used to overlap cells, as described in the
description of the table model. The A A The Returns the position of the cell in the row's Returns −1 if the element isn't in a row. The The The The The The The various table elements and their content attributes together define the table
model. A table consists of cells aligned on a two-dimensional grid of
slots with coordinates (x, y). The grid is finite, and is either empty or has one or more slots. If the grid
has one or more slots, then the x coordinates are always in the range 0 ≤ x < xwidth, and the y coordinates are always in the
range 0 ≤ y < yheight. If one or both of xwidth and yheight are zero, then the
table is empty (has no slots). Tables correspond to A cell is a set of slots anchored at a slot (cellx, celly), and with
a particular width and height such that the cell covers
all the slots with coordinates (x, y) where cellx ≤ x < cellx+width and celly ≤ y < celly+height. Cells can either be data cells
or header cells. Data cells correspond to It is possible, in certain error cases, for two cells to occupy the same slot. A row is a complete set of slots from x=0 to x=xwidth-1, for a particular value of y. Rows usually
correspond to A column is a complete set of slots from y=0 to y=yheight-1, for a particular value of x. Columns can
correspond to A row group is a set of rows anchored at a slot (0, groupy) with a particular height such that the row group
covers all the slots with coordinates (x, y) where 0 ≤ x < xwidth and groupy ≤ y < groupy+height. Row groups correspond to
A column group is a set of columns anchored at a slot (groupx, 0) with a particular width such that the column group
covers all the slots with coordinates (x, y) where groupx ≤ x < groupx+width and 0 ≤ y < yheight. Column
groups correspond to Row groups cannot overlap each other. Similarly, column groups cannot overlap each other. A cell cannot cover slots that are from two or more row groups. It is, however, possible for a cell to be in multiple
column groups. All the slots that form part of one cell
are part of zero or one row groups and zero or more column groups. In addition to cells, columns, rows, row groups, and column
groups, tables can have a A table model error is an error with the data represented by To determine which elements correspond to which slots in a table associated with a Let xwidth be 0. Let yheight be 0. Let pending Let the table be the table represented
by the If the Associate the first Let the current element be the first element child of the
If a step in this algorithm ever requires the current element to be advanced to the next child of the While the current element is not one of the following elements, advance the current element to the next
child of the If the current element is a Column groups: Process the current element according to the
appropriate case below: Follow these steps: Let xstart have the value of xwidth. Let the current column be the first Columns: If the current column If the result of parsing the value is not an error or zero, then let span be that value. Otherwise, if the If span is greater than 1000, let it be 1000 instead. Increase xwidth by span. Let the last span columns in
the table correspond to the current column
If current column is not the last Let all the last columns in the
table from x=xstart to
x=xwidth-1 form a new column group, anchored at the slot (xstart, 0), with width xwidth-xstart, corresponding to the If the If the result of parsing the value is not an error or zero, then let span be that value. Otherwise, if the If span is greater than 1000, let it be 1000 instead. Increase xwidth by span. Let the last span columns in
the table form a new column
group, anchored at the slot (xwidth-span, 0), with width span, corresponding to the While the current element is not one of the following elements, advance the current element to the
next child of the If the current element is a Let ycurrent be 0. Let the list of downward-growing cells be an empty list. Rows: While the current element is not one of the following
elements, advance the current
element to the next child of the If the current element is a Run the algorithm for ending a row group. If the current element is a The current element is either a Run the algorithm for processing row groups. Return to the step labeled rows. End: For each If there exists a row or column in the table containing only slots that do not have a cell
anchored to them, then this is a table model error. Return the table. The algorithm for processing row groups, which is invoked by the set of steps above
for processing Let ystart have the value of yheight. For each If yheight > ystart, then let all the last rows in the table from y=ystart to y=yheight-1 form a new row
group, anchored at the slot with coordinate (0, ystart), with height yheight-ystart, corresponding
to the element being processed. Run the algorithm for ending a row group. The algorithm for ending a row group, which is invoked by the set of steps above
when starting and ending a block of rows, is: While ycurrent is less than yheight, follow these steps: Increase ycurrent by 1. Empty the list of downward-growing cells. The algorithm for processing rows, which is invoked by the set of steps above for
processing If yheight is equal to ycurrent, then increase yheight by
1. (ycurrent is never greater than yheight.) Let xcurrent be 0. If the Let current cell be the first Cells: While xcurrent is less than xwidth and the slot with coordinate (xcurrent, ycurrent) already has a
cell assigned to it, increase xcurrent by 1. If xcurrent is equal to xwidth, increase xwidth by 1. (xcurrent is never greater than xwidth.) If the current cell has a If parsing that value failed, or returned zero, or if the attribute is absent, then let colspan be 1, instead. If colspan is greater than 1000, let it be 1000 instead. If the current cell has a If parsing that value failed or if the attribute is absent, then let rowspan be 1, instead. If rowspan is greater than 65534, let it be 65534 instead. If rowspan is zero and the If xwidth < xcurrent+colspan, then let xwidth be xcurrent+colspan. If yheight < ycurrent+rowspan, then let yheight be ycurrent+rowspan. Let the slots with coordinates (x, y) such that xcurrent ≤ x < xcurrent+colspan and ycurrent ≤ y < ycurrent+rowspan be covered by a
new cell c, anchored at (xcurrent, ycurrent),
which has width colspan and height rowspan,
corresponding to the current cell element. If the current cell element is a To establish which header cells apply to the current cell element, use
the algorithm for assigning header cells described in the next section. If any of the slots involved already had a cell covering
them, then this is a table model error. Those slots now have two cells
overlapping. If cell grows downward is true, then add the tuple {c, xcurrent, colspan}
to the list of downward-growing cells. Increase xcurrent by colspan. If current cell is the last Let current cell be the next Return to the step labeled cells. When the algorithms above require the user agent to run the algorithm for growing
downward-growing cells, the user agent must, for each {cell, cellx, width} tuple in the list of downward-growing cells, if any, extend the cell cell so that it also covers the slots with
coordinates (x, ycurrent), where cellx ≤ x < cellx+width. Each cell can be assigned zero or more header cells. The algorithm for assigning header
cells to a cell principal cell is as follows. Let header list be an empty list of cells. Let (principalx, principaly) be the coordinate of the slot to which the principal
cell is anchored. Take the value of the principal cell's For each token in the id list, if the
first element in the Let principalwidth be the width of the principal cell. Let principalheight be the height of the principal cell. For each value of y from principaly to principaly+principalheight-1, run
the internal algorithm for scanning and assigning header cells, with the principal cell, the header list, the initial coordinate
(principalx, y), and the
increments Δx=−1 and Δy=0. For each value of x from principalx to principalx+principalwidth-1, run
the internal algorithm for scanning and assigning header cells, with the principal cell, the header list, the initial coordinate
(x, principaly), and the
increments Δx=0 and Δy=−1. If the principal cell is anchored in a row group, then add all header cells that are row group headers and are anchored in the same row group
with an x-coordinate less than or equal to principalx+principalwidth-1 and a y-coordinate less than or
equal to principaly+principalheight-1 to header
list. If the principal cell is anchored in a column group, then add all header cells that are column group headers and are anchored in the same column
group with an x-coordinate less than or equal to principalx+principalwidth-1 and a y-coordinate less than or
equal to principaly+principalheight-1 to header
list. Remove all the empty cells from the header
list. Remove any duplicates from the header list. Remove principal cell from the header list if it is
there. Assign the headers in the header list to the principal
cell. The internal algorithm for scanning and assigning header cells, given a principal cell, a header list, an initial coordinate (initialx, initialy),
and Δx and Δy increments, is as follows: Let x equal initialx. Let y equal initialy. Let opaque headers be an empty list of cells. Let in header block be true, and let headers from
current header block be a list of cells containing just the principal
cell. Let in header block be false and let headers from
current header block be an empty list of cells. Loop: Increment x by Δx; increment y by Δy. For each invocation of this algorithm, one of Δx and
Δy will be −1, and the other will be 0. If either x or y are less than 0, then abort this
internal algorithm. If there is no cell covering slot (x, y), or if there
is more than one cell covering slot (x, y), return to
the substep labeled loop. Let current cell be the cell covering slot (x, y). Set in header block to true. Add current cell to headers from current header
block. Let blocked be false. If there are any cells in the opaque headers list anchored with the
same x-coordinate as the current cell, and with
the same width as current cell, then let blocked
be true. If the current cell is not a column header, then let
blocked be true. If there are any cells in the opaque headers list anchored with the
same y-coordinate as the current cell, and with
the same height as current cell, then let blocked
be true. If the current cell is not a row header, then let blocked be true. If blocked is false, then add the current cell
to the header list. Set in header block to false. Add all the cells in headers from current header block to the opaque headers
list, and empty the headers from current header block list. Return to the step labeled loop. A header cell anchored at the slot with coordinate (x, y) with width
width and height height is said to be a column header if any of
the following are true: the cell's A header cell anchored at the slot with coordinate (x, y) with width
width and height height is said to be a row header if any of the
following are true: the cell's A header cell is said to be a column group header if its A header cell is said to be a row group header if its A cell is said to be an empty cell if it contains no elements and its child
text content, if any, consists only of ASCII whitespace. This section is non-normative. The following shows how one might mark up the bottom part of table 45 of the Smithsonian
physical tables, Volume 71: This table could look like this: The following shows how one might mark up the gross margin table on page 46 of Apple, Inc's
10-K filing for fiscal year 2008: This table could look like this: The following shows how one might mark up the operating expenses table from lower on the same
page of that document: This table could look like this:thead element. If the new value is not a
thead element, throws a "HierarchyRequestError"
thead = table.createTHead()Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+thead element, and returns it.table.deleteTHead()Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+thead element.table.tFoot [ = value ]Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+tfoot element.tfoot element. If the new value is not a
tfoot element, throws a "HierarchyRequestError"
tfoot = table.createTFoot()Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+tfoot element, and returns it.table.deleteTFoot()Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+tfoot element.table.tBodiesFirefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+tbody elements of the
table.tbody = table.createTBody()Firefox25+Safari6+Chrome20+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?tbody element, inserts it into the table, and returns it.table.rowsFirefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+tr elements of the
table.tr = table.insertRow([ index ])Firefox1+Safari4+Chrome1+
Opera10+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS3+Chrome Android?WebView Android37+Samsung Internet?Opera Android10.1+tr element, along with a tbody if required, inserts them
into the table at the position given by the argument, and returns the tr.IndexSizeError" table.deleteRow(index)Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+tr element with the given position in the table.IndexSizeError"
table element's node document, the given local name, and the HTML
namespace.caption
IDL attribute must return, on getting, the first caption element child of the
table element, if any, or null otherwise. On setting, the first caption
element child of the table element, if any, must be removed, and the new value, if
not null, must be inserted as the first node of the table element.createCaption() method must return the first
caption element child of the table element, if any; otherwise a new
caption element must be table-created, inserted as the first node of the
table element, and then returned.deleteCaption() method must remove the first
caption element child of the table element, if any.tHead IDL
attribute must return, on getting, the first thead element child of the
table element, if any, or null otherwise. On setting, if the new value is null or a
thead element, the first thead element child of the table
element, if any, must be removed, and the new value, if not null, must be inserted immediately
before the first element in the table element that is neither a caption
element nor a colgroup element, if any, or at the end of the table if there are no
such elements. If the new value is neither null nor a thead element, then a
"HierarchyRequestError"
createTHead() method must return the first
thead element child of the table element, if any; otherwise a new
thead element must be table-created and inserted immediately before the
first element in the table element that is neither a caption element nor
a colgroup element, if any, or at the end of the table if there are no such elements,
and then that new element must be returned.deleteTHead() method must remove the first
thead element child of the table element, if any.tFoot IDL
attribute must return, on getting, the first tfoot element child of the
table element, if any, or null otherwise. On setting, if the new value is null or a
tfoot element, the first tfoot element child of the table
element, if any, must be removed, and the new value, if not null, must be inserted at the end of
the table. If the new value is neither null nor a tfoot element, then a
"HierarchyRequestError"
createTFoot() method must return the first
tfoot element child of the table element, if any; otherwise a new
tfoot element must be table-created and inserted at the end of the
table, and then that new element must be returned.deleteTFoot() method must remove the first
tfoot element child of the table element, if any.tBodies
attribute must return an table node, whose
filter matches only tbody elements that are children of the table
element.createTBody() method must table-create a new tbody element, insert it immediately
after the last tbody element child in the table element, if any, or at
the end of the table element if the table element has no
tbody element children, and then must return the new tbody element.rows
attribute must return an table node, whose
filter matches only tr elements that are either children of the table
element, or children of thead, tbody, or tfoot elements
that are themselves children of the table element. The elements in the collection
must be ordered such that those elements whose parent is a thead are included first,
in tree order, followed by those elements whose parent is either a table
or tbody element, again in tree order, followed finally by those
elements whose parent is a tfoot element, still in tree order.insertRow(index) method depends on the state
of the table. When it is called, the method must act as required by the first item in the
following list of conditions that describes the state of the table and the index
argument:rows collection:IndexSizeError"
rows collection has zero elements in it, and the
table has no tbody elements in it:tbody
element, then table-create a tr element, then
append the tr element to the tbody element, then append the
tbody element to the table element, and finally return the
tr element.rows collection has zero elements in it:tr element,
append it to the last tbody element in the table, and return the tr
element.rows collection:tr element,
and append it to the parent of the last tr element in the rows collection. Then, the newly created tr element
must be returned.tr element,
insert it immediately before the indexth tr element in the rows collection, in the same parent, and finally must return the
newly created tr element.deleteRow(index) method is called, the user
agent must run the following steps:rows collection, then throw an
"IndexSizeError" index is −1, then remove
the last element in the rows collection from its parent, or
do nothing if the rows collection is empty.rows collection from its parent.
4.9.1.1 Techniques for describing tables
Negative
Characteristic
Positive
Sad
Mood
Happy
Failing
Grade
Passing
captioncaption, in a details elementfigurefigure's figcaption
headers attributes:4.9.1.2 Techniques for table design
4.9.2 The
caption elementFirefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+table element.table elements.caption element's end tag can be omitted if
the caption element is not immediately followed by ASCII whitespace or a
comment.[caption element represents the title of the table
that is its parent, if it has a parent and that is a table element.caption element takes part in the table model.table element is the only content in a figure element other
than the figcaption, the caption element should be omitted in favor of
the figcaption.
1 2 3 4 5 6
1 2 3 4 5 6 7
2 3 4 5 6 7 8
3 4 5 6 7 8 9
4 5 6 7 8 9 10
5 6 7 8 9 10 11
6 7 8 9 10 11 12
1 2 3 4 5 6
1 2 3 4 5 6 7
2 3 4 5 6 7 8
3 4 5 6 7 8 9
4 5 6 7 8 9 10
5 6 7 8 9 10 11
6 7 8 9 10 11 12
4.9.3 The
colgroup elementFirefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+table element, after any
caption elements and before any thead,
tbody, tfoot, and tr
elements.span attribute is present: Nothing.span attribute is absent: Zero or more col and template elements.colgroup element's start tag can be
omitted if the first thing inside the colgroup element is a col element,
and if the element is not immediately preceded by another colgroup element whose
end tag has been omitted. (It can't be omitted if the element
is empty.)colgroup element's end tag can be omitted
if the colgroup element is not immediately followed by ASCII whitespace
or a comment.span — Number of columns spanned by the element
[colgroup element represents a group of one or more columns in the table that is its parent, if it has a
parent and that is a table element.colgroup element contains no col elements, then the element
may have a span
content attribute specified, whose value must be a valid non-negative integer greater
than zero and less than or equal to 1000.colgroup element and its span
attribute take part in the table model.span
IDL attribute must reflect the content attribute of the same name. It is
clamped to the range [1, 1000], and its default value is 1.4.9.4 The
col elementFirefox1+Safari4+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?colgroup element that doesn't have
a span attribute.span — Number of columns spanned by the element
HTMLTableColElement, as defined for colgroup elements.col element has a parent and that is a colgroup element that
itself has a parent that is a table element, then the col element
represents one or more columns in the column group represented by that colgroup.span content attribute specified, whose value must be a
valid non-negative integer greater than zero and less than or equal to 1000.col element and its span attribute take
part in the table model.4.9.5 The
tbody elementFirefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+table element, after any
caption, colgroup, and
thead elements, but only if there are no
tr elements that are children of the
table element.tr and script-supporting elements.tbody element's start tag can be omitted
if the first thing inside the tbody element is a tr element, and if the
element is not immediately preceded by a tbody, thead, or
tfoot element whose end tag has been omitted. (It
can't be omitted if the element is empty.)tbody element's end tag can be omitted if
the tbody element is immediately followed by a tbody or
tfoot element, or if there is no more content in the parent element.[HTMLTableSectionElement interface is also used for thead and
tfoot elements.tbody element represents a block of rows that consist of a
body of data for the parent table element, if the tbody element has a
parent and it is a table.tbody element takes part in the table model.tbody.rowstr elements of the table
section.tr = tbody.insertRow([ index ])tr element, inserts it into the table section at the position given by
the argument, and returns the tr.IndexSizeError" tbody.deleteRow(index)tr element with the given position in the table section.IndexSizeError"
rows attribute must return an tr elements that are children of
this element.insertRow(index) method must act as
follows:rows collection, throw an
"IndexSizeError" table row be the result of creating an
element given this element's node document, "tr", and
the HTML namespace.rows collection, then append table row to this element.tr element in the
rows collection.deleteRow(index) method must, when invoked,
act as follows:
rows collection, then throw an
"IndexSizeError" index is −1, then remove
the last element in the rows collection from this
element, or do nothing if the rows collection is
empty.rows collection from this element.4.9.6 The
thead elementFirefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+table element, after any
caption, and colgroup
elements and before any tbody, tfoot, and
tr elements, but only if there are no other
thead elements that are children of the
table element.tr and script-supporting elements.thead element's end tag can be omitted if
the thead element is immediately followed by a tbody or
tfoot element.HTMLTableSectionElement, as defined for tbody elements.thead element represents the block of rows that consist of
the column labels (headers) and any ancillary non-header cells for the parent table
element, if the thead element has a parent and it is a table.thead element takes part in the table model.
thead element being used. Notice the use of both
th and td elements in the thead element: the first row is
the headers, and the second row is an explanation of how to fill in the table.4.9.7 The
tfoot elementFirefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+table element, after any
caption, colgroup, thead,
tbody, and tr elements, but only if there
are no other tfoot elements that are children of the
table element.tr and script-supporting elements.tfoot element's end tag can be omitted if
there is no more content in the parent element.HTMLTableSectionElement, as defined for tbody elements.tfoot element represents the block of rows that consist of
the column summaries (footers) for the parent table element, if the
tfoot element has a parent and it is a table.tfoot element takes part in the table
model.4.9.8 The
tr elementFirefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+thead element.tbody element.tfoot element.table element, after any
caption, colgroup, and thead
elements, but only if there are no tbody elements that
are children of the table element.td, th, and script-supporting elements.tr element's end tag can be omitted if the
tr element is immediately followed by another tr element, or if there is
no more content in the parent element.[tr element represents a row of
cells in a table.tr element takes part in the table model.tr.rowIndexFirefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+rows
list.tr.sectionRowIndexrows list.tr.cellscell = tr.insertCell([ index ])Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+td element, inserts it into the table row at the position given by the
argument, and returns the td.IndexSizeError" tr.deleteCell(index)td or th element with the given position in the
row.IndexSizeError"
rowIndex attribute must, if this element has a parent
table element, or a parent tbody, thead, or
tfoot element and a grandparent table element, return the index
of this tr element in that table element's rows collection. If there is no such table element,
then the attribute must return −1.sectionRowIndex attribute must, if this element has a
parent table, tbody, thead, or tfoot element,
return the index of the tr element in the parent element's rows collection (for tables, that's HTMLTableElement's rows collection; for table sections, that's
HTMLTableSectionElement's rows
collection). If there is no such parent element, then the attribute must return −1.cells
attribute must return an tr element, whose
filter matches only td and th elements that are children of the
tr element.insertCell(index) method must act as
follows:cells collection, then throw an
"IndexSizeError" table cell be the result of creating an
element given this tr element's node document, "td", and the HTML namespace.cells collection, then append table cell to this tr
element.tr element, immediately before the indexth td
or th element in the cells collection.deleteCell(index) method must act as
follows:cells collection, then throw an
"IndexSizeError" index is −1, then remove
the last element in the cells collection from its
parent, or do nothing if the cells collection is
empty.cells collection from its parent.4.9.9 The
td elementFirefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+Firefox1+Safari3+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet Explorer5.5+
Firefox Android?Safari iOS1+Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+tr element.td element's end tag can be omitted if the
td element is immediately followed by a td or th element,
or if there is no more content in the parent element.colspan — Number of columns that the cell is to span
rowspan — Number of rows that the cell is to span
headers — The header cells for this cell
[HTMLTableCellElement interface is also used for th elements.td element represents a data cell in a table.td element and its colspan, rowspan, and headers
attributes take part in the table model.abbr
attributes on those header cells, if any, instead of the contents of the header cells
themselves.
th elements instead of
td elements. A script would attach event handlers to these elements to maintain the
total.4.9.10 The
th elementFirefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+tr element.header, footer,
sectioning content, or heading content descendants.th element's end tag can be omitted if the
th element is immediately followed by a td or th element,
or if there is no more content in the parent element.colspan — Number of columns that the cell is to span
rowspan — Number of rows that the cell is to span
headers — The header cells for this cell
scope — Specifies which cells the header cell applies to
abbr — Alternative label to use for the header cell when referencing the cell in other contexts
HTMLTableCellElement, as defined for td elements.th element represents a header cell in a table.th element may have a scope content attribute specified.scope attribute is an enumerated attribute
with the following keywords and states:Keyword
State
Brief description
row
Row
The header cell applies to some of the subsequent cells in the same row(s).
col
Column
The header cell applies to some of the subsequent cells in the same column(s).
rowgroup
Row Group
The header cell applies to all the remaining cells in the row group.
colgroup
Column Group
The header cell applies to all the remaining cells in the column group.
th element's scope attribute must not be in
the Row Group state if the element is not anchored in
a row group, nor in the Column Group state if the element is not anchored in a
column group.
th element may have an abbr content attribute specified. Its value must be an
alternative label for the header cell, to be used when referencing the cell in other contexts
(e.g. when describing the header cells that apply to a data cell). It is typically an abbreviated
form of the full header cell, but can also be an expansion, or merely a different phrasing.th element and its colspan, rowspan, headers, and
scope attributes take part in the table model.
scope attribute's rowgroup value affects which data cells a header cell
applies to. ID Measurement Average Maximum
Cats
93 Legs 3.5 4
10 Tails 1 1
English speakers
32 Legs 2.67 4
35 Tails 0.33 1
scope attribute in the Row Group state apply to all the cells in their row
group other than the cells in the first column.
4.9.11 Attributes common to
td and th elementstd and th elements may have a colspan content attribute specified, whose value must be a
valid non-negative integer greater than zero and less than or equal to 1000.td and th elements may also have a rowspan content attribute specified,
whose value must be a valid non-negative integer less than or equal to 65534. For
this attribute, the value zero means that the cell is to span all the remaining rows in the row
group.
td and th element may have a headers content attribute specified. The headers attribute, if specified, must contain a string
consisting of an unordered set of unique space-separated tokens, none of which are
identical to another token and each of which must have the value of an ID of a th element taking part in the same table as the td or th element (as defined by the table model).th element with ID id is
said to be directly targeted by all td and th elements in the
same table that have headers attributes whose values include as one of their tokens
the ID id. A th element A is said to be targeted by a th or td element
B if either A is directly targeted by B or if there exists an element C that is itself
targeted by the element B and A is directly
targeted by C.th element must not be targeted by itself.colspan, rowspan, and headers
attributes take part in the table model.
cell.cellIndexcells list.
This does not necessarily correspond to the x-position of the cell in the table,
since earlier cells might cover multiple rows or columns.colSpan IDL attribute must reflect the colspan content attribute. It is clamped to the
range [1, 1000], and its default value is 1.rowSpan IDL attribute must reflect the rowspan content attribute. It is clamped to the
range [0, 65534], and its default value is 1.headers IDL attribute must reflect the content
attribute of the same name.cellIndex IDL attribute must, if the element has a parent
tr element, return the index of the cell's element in the parent element's cells collection. If there is no such parent element, then the
attribute must return −1.scope
IDL attribute must reflect the content attribute of the same name, limited to
only known values.abbr IDL
attribute must reflect the content attribute of the same name.4.9.12 Processing model
table elements.td elements, and header cells
correspond to th elements. Cells of both types can have zero or more associated
header cells.tr elements, though a row group
can have some implied rows at the end in some cases involving
cells spanning multiple rows.col elements. In the absence of col elements, columns are
implied.tbody, thead, and tfoot elements. Not every row is
necessarily in a row group.colgroup elements. Not every column is necessarily in a column
group.caption element
associated with them. This gives the table a heading, or legend.table
elements and their descendants. Documents must not have table model errors.4.9.12.1 Forming a table
table element, to determine the
dimensions of the table (xwidth and yheight), and to determine if there are any table model errors, user agents must use the following algorithm:tfoot elements be a list of tfoot
elements, initially empty.table element. The xwidth and yheight variables give the table's
dimensions. The table is initially empty.table element has no children elements, then return the
table (which will be empty).caption element child of the table element with
the table. If there are no such children, then it has no associated
caption element.table element.table when
there is no such next child, then the user agent must jump to the step labeled end, near
the end of this algorithm.table:colgroup, follow these
substeps:col element childrencol element child
of the colgroup element.col element has
a span attribute, then parse its value using the
rules for parsing non-negative integers.col element has no span attribute, or if trying to parse the attribute's value
resulted in an error or zero, then let span be 1.col element.col element child of
the colgroup element, then let the current column be the
next col element child of the colgroup element, and return to
the step labeled columns.colgroup element.col element childrencolgroup element has a span
attribute, then parse its value using the rules for parsing non-negative
integers.colgroup element has no span attribute, or if trying to parse the attribute's
value resulted in an error or zero, then let span be 1.colgroup element.table:colgroup element, jump to the
step labeled column groups above.table:tr, then run the algorithm
for processing rows, advance the current element to the next child of the table, and return to the
step labeled rows.tfoot, then add that element to
the list of pending tfoot elements, advance the current element to the next
child of the table, and return to the step labeled rows.thead or a
tbody.tfoot element in the list of pending
tfoot elements, in tree order, run the algorithm for processing row
groups.thead, tbody, and tfoot elements, is:tr element that is a child of the element being processed, in tree
order, run the algorithm for processing rows.tr elements, is:tr element being processed has no td or th
element children, then increase ycurrent by 1, abort
this set of steps, and return to the algorithm above.td or th element child
in the tr element being processed.colspan
attribute, then parse that attribute's
value, and let colspan be the result.rowspan
attribute, then parse that attribute's
value, and let rowspan be the result.table element's
node document is not set to quirks mode, then let cell grows
downward be true, and set rowspan to 1. Otherwise, let cell grows downward be false.th element, let this new
cell c be a header cell; otherwise, let it be a data cell.td or th element child in
the tr element being processed, then increase ycurrent by 1, abort this set of steps, and return to the algorithm
above.td or th element child
in the tr element being processed.4.9.12.2 Forming relationships between data cells and header cells
headers attribute specifiedheaders attribute and split it on ASCII whitespace, letting id list be the
list of tokens obtained.Document with an ID equal to
the token is a cell in the same table, and that cell is not the
principal cell, then add that cell to header list.headers attribute specifiedscope attribute is in the Auto state, and there are no data cells in any of the
cells covering slots with y-coordinates y .. y+height-1.scope attribute is in the Auto state, the cell is not a column
header, and there are no data cells in any of the cells covering slots with
x-coordinates x .. x+width-1.scope attribute is in the Column Group state.scope attribute is in the Row Group state.4.9.13 Examples
Grade. Yield Point. Ultimate tensile strength Per cent elong. 50.8 mm or 2 in. Per cent reduct. area. kg/mm2 lb/in2 Hard 0.45 ultimate 56.2 80,000 15 20 Medium 0.45 ultimate 49.2 70,000 18 25 Soft 0.45 ultimate 42.2 60,000 22 30
2008
2007
2006
Net sales
$ 32,479
$ 24,006
$ 19,315
Cost of sales
21,334
15,852
13,717
Gross margin
$ 11,145
$ 8,154
$ 5,598
Gross margin percentage
34.3%
34.0%
29.0%
2008 2007 2006
Research and development
$ 1,109 $ 782 $ 712
Percentage of net sales
3.4% 3.3% 3.7%
Selling, general, and administrative
$ 3,761 $ 2,963 $ 2,433
Percentage of net sales
11.6% 12.3% 12.6%