We will learn how to add a row to a table using JavaScript dom. To achieve this, we have multiple methods. Some of them are the following. - Using the insertRow() method
- By creating the new Element
Using the insertRow() MethodThe inserRow() method is used to insert a new row at the starting of the table. It creates a new <tr> element and inserts it into the table. This takes a number as a parameter that specifies the position of the table. If we do not pass any parameter then it inserts the row at the starting of the table. If you want to insert the row in the last of the table, then pass -1 as the parameter. Syntaxtable.insertRow(index) Return value − The element which was inserted. As we know a proper table has not just table rows (<tr>), but also table documents (<td>) which are called table cells. To insert cells inside a row we use the insertCell() method. It creates a <td> element inside the table row. It takes a number as a parameter that specifies the index of the cell inside that row. SyntaxBelow is the syntax to insert cell − table.insertCell(index) Return value − The element which was inserted. Steps to add a row to the table
- Get the data table element.
- Create a row using the insertRow() method and inset it into the table.
- Create new cell(s) using the insertCell() method and insert them into the row you created.
- Add data to the newly created cells.
ExampleIn this example, we have a table that contains the name of the students and their ages. We are adding a new student at the end of the table. The
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
2 HTML element defines a row of cells in a table. The row's cells can then be established using a mix of
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
3 (data cell) and
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
4 (header cell) elements.
This element includes the global attributes. The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only. Deprecated Specifies the horizontal alignment of each row cell. The possible enumerated values are
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
6,
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
7,
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
8,
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
9, and
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
0. When supported, the
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
0 value aligns the textual content on the character defined in the attribute and on offset defined by the attribute. Use the
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
4 CSS property instead, as this attribute is deprecated. Deprecated Defines the background color of each row cell. The value is an HTML color; either a 6-digit hexadecimal RGB code, prefixed by a '
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
6', or a color keyword. Other CSS
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
7 values are not supported. Use the
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
8 CSS property instead, as this attribute is deprecated. Deprecated Specifies the alignment of the content to a character of each row cell. Typical values for this include a period (
<table>
<tr>
<th scope="col">Symbol</th>
<th scope="col">Code word</th>
<th scope="col">Pronunciation</th>
</tr>
<tr>
<th scope="row">A</th>
<td>Alfa</td>
<td>AL fah</td>
</tr>
<tr>
<th scope="row">B</th>
<td>Bravo</td>
<td>BRAH voh</td>
</tr>
<tr>
<th scope="row">C</th>
<td>Charlie</td>
<td>CHAR lee</td>
</tr>
<tr>
<th scope="row">D</th>
<td>Delta</td>
<td>DELL tah</td>
</tr>
</table>
- when attempting to align numbers or monetary values. If is not set to
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
0, this attribute is ignored. Deprecated Specifies the number of characters to offset the row cell content from the alignment character specified by the attribute. Deprecated Specifies the vertical alignment of each row cell. The possible enumerated values are
<table>
<tr>
<th scope="col">Symbol</th>
<th scope="col">Code word</th>
<th scope="col">Pronunciation</th>
</tr>
<tr>
<th scope="row">A</th>
<td>Alfa</td>
<td>AL fah</td>
</tr>
<tr>
<th scope="row">B</th>
<td>Bravo</td>
<td>BRAH voh</td>
</tr>
<tr>
<th scope="row">C</th>
<td>Charlie</td>
<td>CHAR lee</td>
</tr>
<tr>
<th scope="row">D</th>
<td>Delta</td>
<td>DELL tah</td>
</tr>
</table>
6,
<table>
<tr>
<th scope="col">Symbol</th>
<th scope="col">Code word</th>
<th scope="col">Pronunciation</th>
</tr>
<tr>
<th scope="row">A</th>
<td>Alfa</td>
<td>AL fah</td>
</tr>
<tr>
<th scope="row">B</th>
<td>Bravo</td>
<td>BRAH voh</td>
</tr>
<tr>
<th scope="row">C</th>
<td>Charlie</td>
<td>CHAR lee</td>
</tr>
<tr>
<th scope="row">D</th>
<td>Delta</td>
<td>DELL tah</td>
</tr>
</table>
7,
<table>
<tr>
<th scope="col">Symbol</th>
<th scope="col">Code word</th>
<th scope="col">Pronunciation</th>
</tr>
<tr>
<th scope="row">A</th>
<td>Alfa</td>
<td>AL fah</td>
</tr>
<tr>
<th scope="row">B</th>
<td>Bravo</td>
<td>BRAH voh</td>
</tr>
<tr>
<th scope="row">C</th>
<td>Charlie</td>
<td>CHAR lee</td>
</tr>
<tr>
<th scope="row">D</th>
<td>Delta</td>
<td>DELL tah</td>
</tr>
</table>
8, and
<table>
<tr>
<th scope="col">Symbol</th>
<th scope="col">Code word</th>
<th scope="col">Pronunciation</th>
</tr>
<tr>
<th scope="row">A</th>
<td>Alfa</td>
<td>AL fah</td>
</tr>
<tr>
<th scope="row">B</th>
<td>Bravo</td>
<td>BRAH voh</td>
</tr>
<tr>
<th scope="row">C</th>
<td>Charlie</td>
<td>CHAR lee</td>
</tr>
<tr>
<th scope="row">D</th>
<td>Delta</td>
<td>DELL tah</td>
</tr>
</table>
9. Use the
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
0 CSS property instead, as this attribute is deprecated.
- The
tr:nth-of-type(odd) {
background-color: eee;}
tr th[scope="row"] {
background-color: d6ecd4;} 2 may be placed as a direct child of its parent tr:nth-of-type(odd) {
background-color: eee;}
tr th[scope="col"] {
background-color: 505050; color: fff;}
tr th[scope="row"] {
background-color: d6ecd4;} 2 element, but only if the tr:nth-of-type(odd) {
background-color: eee;}
tr th[scope="col"] {
background-color: 505050; color: fff;}
tr th[scope="row"] {
background-color: d6ecd4;} 2 has no child tr:nth-of-type(odd) {
background-color: eee;}
tr th[scope="col"] {
background-color: 505050; color: fff;}
tr th[scope="row"] {
background-color: d6ecd4;} 4 elements, and only after any tr:nth-of-type(odd) {
background-color: eee;}
tr th[scope="col"] {
background-color: 505050; color: fff;}
tr th[scope="row"] {
background-color: d6ecd4;} 5, tr:nth-of-type(odd) {
background-color: eee;}
tr th[scope="col"] {
background-color: 505050; color: fff;}
tr th[scope="row"] {
background-color: d6ecd4;} 6, and tr:nth-of-type(odd) {
background-color: eee;}
tr th[scope="col"] {
background-color: 505050; color: fff;}
tr th[scope="row"] {
background-color: d6ecd4;} 7 elements. Otherwise, the parent must be a tr:nth-of-type(odd) {
background-color: eee;}
tr th[scope="col"] {
background-color: 505050; color: fff;}
tr th[scope="row"] {
background-color: d6ecd4;} 7, tr:nth-of-type(odd) {
background-color: eee;}
tr th[scope="col"] {
background-color: 505050; color: fff;}
tr th[scope="row"] {
background-color: d6ecd4;} 4, or table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
} - The CSS pseudo-classes
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
} 1, table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
} 2, and table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
} 3 are often useful for selecting the desired set of rows and their data and header cells ( tr:nth-of-type(odd) {
background-color: eee;}
tr th[scope="row"] {
background-color: d6ecd4;} 3 and tr:nth-of-type(odd) {
background-color: eee;}
tr th[scope="row"] {
background-color: d6ecd4;}
See
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
2 for a complete table example introducing common standards and best practices. This example demonstrates a table with four rows and three columns, where the first column contains headers for the row data cells. HTMLFour
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
2 elements are used to create four table rows. Each row contains three cells - one header cell (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
- and two data cells (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
- - creating three columns. The attribute set on each header cell specifies which cells they relate to, which in this example is all data cells within the
<table>
<tbody>
<tr>
<td>3</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>1</td>
</tr>
</tbody>
</table>
1.
<table>
<tr>
<th scope="row">A</th>
<td>Alfa</td>
<td>AL fah</td>
</tr>
<tr>
<th scope="row">B</th>
<td>Bravo</td>
<td>BRAH voh</td>
</tr>
<tr>
<th scope="row">C</th>
<td>Charlie</td>
<td>CHAR lee</td>
</tr>
<tr>
<th scope="row">D</th>
<td>Delta</td>
<td>DELL tah</td>
</tr>
</table>
CSSThe CSS
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
1 pseudo-class is used to select every
<table>
<tbody>
<tr>
<td>3</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>1</td>
</tr>
</tbody>
</table>
3 row and set the
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
8 of those rows to a slightly darker tone, creating a so-called "zebra stripe" effect. This alternating background makes the rows of data in the table easier to parse and read—imagine having many rows and columns and trying to find some data in a particular row. In addition, the row header cells (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
4 elements) are highlighted with a
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
8 to distinguish them from the data cells (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
3 elements).
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
ResultThis example extends the basic table from the by adding a header row as the first row of the table. HTMLAn additional table row (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
- is added as the first row of the table with column header cells (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
- providing a header for each column. We put this row in a
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
7 grouping element to indicate this is the header of the table. The attribute is added to each header cell (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
- within this head row to explicitly specify that each header cell relates to all the cells within its own column, even though those cells are in the
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
4.
<table>
<tr>
<th scope="col">Symbol</th>
<th scope="col">Code word</th>
<th scope="col">Pronunciation</th>
</tr>
<tr>
<th scope="row">A</th>
<td>Alfa</td>
<td>AL fah</td>
</tr>
<tr>
<th scope="row">B</th>
<td>Bravo</td>
<td>BRAH voh</td>
</tr>
<tr>
<th scope="row">C</th>
<td>Charlie</td>
<td>CHAR lee</td>
</tr>
<tr>
<th scope="row">D</th>
<td>Delta</td>
<td>DELL tah</td>
</tr>
</table>
CSSThe CSS is nearly unchanged from the , except for some additional styling to highlight the "header row" so that the headers of the columns stand out from the other cells.
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
Result
There are no native methods for sorting the rows (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
2 elements) of a
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
2. But using
HTMLTableSectionElement.prototype.sort = function (cb) {
Array.from(this.rows)
.sort(cb)
.forEach((e) => this.appendChild(this.removeChild(e)));
};
document
.querySelector("table")
.tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));
6,
HTMLTableSectionElement.prototype.sort = function (cb) {
Array.from(this.rows)
.sort(cb)
.forEach((e) => this.appendChild(this.removeChild(e)));
};
document
.querySelector("table")
.tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));
7, and
HTMLTableSectionElement.prototype.sort = function (cb) {
Array.from(this.rows)
.sort(cb)
.forEach((e) => this.appendChild(this.removeChild(e)));
};
document
.querySelector("table")
.tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));
8, a custom
HTMLTableSectionElement.prototype.sort = function (cb) {
Array.from(this.rows)
.sort(cb)
.forEach((e) => this.appendChild(this.removeChild(e)));
};
document
.querySelector("table")
.tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));
9 function can be implemented in JavaScript to sort an
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
td {
border: 1px solid rgb(160 160 160);
padding: 4px 8px;
}
0 of
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
2 elements. HTMLA
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
4 element is used in this basic table to mark the body section of the table and to include three rows (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
2 elements) with data (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
3 elements), creating one column with numbers in descending order.
<table>
<tbody>
<tr>
<td>3</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>1</td>
</tr>
</tbody>
</table>
JavaScriptIn the JavaScript code below, the created
HTMLTableSectionElement.prototype.sort = function (cb) {
Array.from(this.rows)
.sort(cb)
.forEach((e) => this.appendChild(this.removeChild(e)));
};
document
.querySelector("table")
.tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));
9 function is attached to the
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
4 element so that it sorts the table cells in order of increasing value and updates the display accordingly.
HTMLTableSectionElement.prototype.sort = function (cb) {
Array.from(this.rows)
.sort(cb)
.forEach((e) => this.appendChild(this.removeChild(e)));
};
document
.querySelector("table")
.tBodies[0].sort((a, b) => a.textContent.localeCompare(b.textContent));
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
td {
border: 1px solid rgb(160 160 160);
padding: 4px 8px;
}
ResultThis example extends the basic table from the by making the sorting interactive and independent for multiple columns. HTMLAn additional data cell (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
3 element) is added to each row (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
2 element) within the table body (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
4 element) to create a second column with letters in ascending order. Using the
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
7 element, a head section is added before the body section to introduce a head row with table header cells (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
4 element). These header cells are used in the JavaScript code below to make them clickable and then to perform the corresponding sorting when activated per click.
<table>
<thead>
<tr>
<th>Numbers</th>
<th>Letters</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>A</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
</tr>
<tr>
<td>1</td>
<td>C</td>
</tr>
</tbody>
</table>
JavaScriptA click event handler is added to each table header (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
4 element) of each
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
2 in the
<table>
<thead>
<tr>
<th>Numbers</th>
<th>Letters</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>A</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
</tr>
<tr>
<td>1</td>
<td>C</td>
</tr>
</tbody>
</table>
4; it sorts all the rows (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
2 elements) of the
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
4 based on the contents of the data cells (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
3 elements) contained in the rows. Note: This solution assumes that the
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
3 elements are populated by raw text with no descendant elements.
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
0
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
1 ResultNote: To be usable and accessible, the header cell of each sortable column must be identifiable as a sorting button and each must define whether the column is currently sorted in ascending or descending order visually and with the
<table>
<thead>
<tr>
<th>Numbers</th>
<th>Letters</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>A</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
</tr>
<tr>
<td>1</td>
<td>C</td>
</tr>
</tbody>
</table>
9 attribute. See the ARIA Authoring Practices Guide's sortable table example for more information. Content categories None Permitted content Zero or more
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
3 and/or
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
4 elements; script-supporting elements (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
02 and
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
- are also allowed. Tag omission Start tag is mandatory. End tag may be omitted if the
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
2 element is immediately followed by a
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
2 element, or if the row is the last element in its parent table group (
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
7,
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
4 or
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
- element. Permitted parents
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
2 (only if the table has no child
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
4 element, and even then only after any
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
5,
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
6, and
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
7 elements); otherwise, the parent must be a
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
7,
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="col"] {
background-color:
# 505050;
color:
# fff;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
4 or
table {
border-collapse: collapse;
border: 2px solid rgb(140 140 140);
font-family: sans-serif;
font-size: 0.8rem;
letter-spacing: 1px;
}
th,
td {
border: 1px solid rgb(160 160 160);
padding: 8px 10px;
}
0 element. Implicit ARIA role
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
17 Permitted ARIA roles Any DOM interface
tr:nth-of-type(odd) {
background-color:
# eee;
}
tr th[scope="row"] {
background-color:
# d6ecd4;
}
18 How to add row in top of table in JavaScript?The insertRow() method creates an empty <tr> element and adds it to a table. The insertRow() method inserts the new row(s) at the specified index in the table. Note: A <tr> element must contain one or more <th> or <td> elements. Tip: Use the deleteRow() method to remove a row. How do you add a row in a table?Click in a cell above or below where you want to add a row. On the Layout tab, do one of the following: To add a row above the cell, click Insert Above in the Rows and Columns group. To add a row below the cell, click Insert Below in the Rows and Columns group. How to add a row dynamically in table in JavaScript?Let me provide you the java script code for addition and deletion of rows.. function addRow(tableID) {. var table = document.getElementById(tableID);. var rowCount = table.rows.length;. var row = table.insertRow(rowCount);. //Column 1.. var cell1 = row.insertCell(0);. var element1 = document.createElement("input");. How to add a row in HTML?How do I add a new table row in HTML?. Edit the text block where your table is.. Click the 'HTML' tool at top left to open the HTML editor window.. Navigate to the section where you would like the new table row (just after a </tr> tag). Add the code: <tr><td></td></tr>. | 
