HTML <table> tag
The Table element
If we want to show the data and information in a two-dimensional table with rows and columns, then we can achieve this by using the HTML element <table>.
Syntax:
<body>
<table>
<thead>
<tr>
<thcolspan="#">………….</th>
</tr>
</thead>
<tbody>
<tr>
<td>……….</td>
<td>……….</td>
</tr>
</tbody>
</table>
</body>
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Html table tag
</title>
</head>
<body>
<table>
<thead>
<tr>
<thcolspan="2">The table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>The table body</td>
<td>with two columns</td>
</tr>
</tbody>
</table>
</body>
</html>
CSS:
table,
td {
border: 1px solid #333;
}
thead,
tfoot {
background-color: #333;
color: #fff;
}Output:
Attributes
Align
The values hold by align attribute are right, left, center, justify and char. This attribute is used to determine the visual alignment.
Left:
We use the left property within the align tag to show the table on the left side of the web page.
<table align="left">
center:
We utilize the center property within the align tag to show the table at the center on the web page.
< table align="center">
right:
We utilize the right property within the align tag to show the table on the right side of the web page.
<table align="right">
<table style="margin-left: 50px;">
<table style="margin-right: 50px;">Bgcolor
The background colour of the table can be achieved by bgcolor. It is a hexadecimal RGB code with six digits and a "#" prefix. You can also write the name for a color.
You can also use the following CSS background-color property to get the same output:
<tbody>
<tr>
<td bgcolor="red">The table body</td>
<td>with two columns</td>
</tr>
</tbody>border
This numeric parameter in pixels specifies the size of the table's frame. If it setsas 0, the frame property is set to void.
You can also use the following CSS border shorthand element to get the same output:
<table border="2">
cellpadding
This element defines the distance between the information and the corresponding border. If we specify the length of cellpading in pixels, then the pixel will be given to each corner of the cell. If the length is defined using a percentage figure, the content will be centred and the entire vertical space (top and bottom) will be used this value. The whole horizontal space remains constant (left and right).
Similar results may be obtained by giving the border-collapse property to the table tag and the padding attribute to the td elements.
cellspacing
You can specify cellspacing feature either in percentage or pixel for defining the space between the two cells.
The region between the top of the table and the boxes of the first row, the left of the table and the first column, the right of the table and the final column, and the bottom of the table and the last row is also included in the tag's horizontal and vertical coverage.
You can also use the border-spacing property on the table> tag to get the same result. Border-spacing has no effect if border-collapse is set to collapse.
frame
This property specifies which side of the frame to be shown around the table. You can also use the border-style and border-width properties to get the same output.
rules
This enumerated attribute describes the rules to be placed in the table. This attribute contains the following values:
None:
None value of rules attribute denotes the absence of any rules.
Groups:
The rules are only displayed between thead, tbody, and tfoot tags as well as between column groups. It is provided by the col> and colgroup> attributes.
Rows:
The rules will be shown between the rows as a consequence of the rows.
Columns:
The rules will appear between the columns as a consequence.
Bgcolor:-
This attribute of the <table> tag determines the background color of the table.
summary
This attribute specifies the alternative text for table’s content. You can also use the caption tag instead of this attribute.
width
This parameter specifies the width of the table. You can also use the following CSS width property instead of width attribute:
<table style="width: 100px;">
Examples
Simple table
<!DOCTYPE html>
<html>
<head>
<title>
Html table tag
</title>
</head>
<body>
<table>
<tr>
<td>deepanshu</td>
<td>lather</td>
</tr>
<tr>
<td>deepanshu</td>
<td>lather</td>
</tr>
</table>
</body>
</html>
Output:
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Html table tag
</title>
</head>
<body>
<p>Simple table with header</p>
<table>
<tr>
<th>First name</th>
<th>middle name</th>
</tr>
<tr>
<td>deepanshu</td>
<td>lather</td>
</tr>
<tr>
<td>jaideep</td>
<td>lather</td>
</tr>
</table>
</body>
</html>
Output:
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Html table tag
</title>
</head>
<body>
<p>Table havingthead, tfoot, and tbody tags in it</p>
<table>
<thead>
<tr>
<th>sakshi</th>
<th>lather</th>
</tr>
</thead>
<tbody>
<tr>
<td>navdeep</td>
<td>dhanda</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>family members</td>
<td>childrens</td>
</tr>
</tfoot>
</table>
<p>Table with colgroup</p>
<table>
<colgroup span="4"></colgroup>
<tr>
<th>player</th>
<th>user name</th>
<th>annual income</th>
<th>server</th>
</tr>
<tr>
<td>almighty 01</td>
<td> almighty 999 yt</td>
<td>656 million</td>
<td>india</td>
</tr>
<tr>
<td>jai</td>
<td>devil hunt 01</td>
<td>915 million</td>
<td>india</td>
</tr>
</table>
</body>
</html>Output:
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Html table tag
</title>
</head>
<body>
<p>Table with colgroup and col</p>
<table>
<colgroup>
<col style="background-color: #0f0">
<col span="2">
</colgroup>
<tr>
<th>apple</th>
<th>banana</th>
<th>mango</th>
</tr>
<tr>
<td>red</td>
<td>blue</td>
<td>white</td>
</tr>
</table>
</body>
</html>
Output:
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Html table tag
</title>
</head>
<body>
<p>Simple table with caption</p>
<table>
<caption>Awesome caption</caption>
<tr>
<td>Awesome data</td>
</tr>
</table>
</body>
</html>
Output:
Table sorting
The rows of an HTML table cannot be sorted automatically. However, you may construct your own sort() function to order an HTMLCollection of <tr> components by utilising the following functions:
1. Array.prototype.slice(),
2. Array.prototype.sort(),
3. Node.removeChild(), and
4. Node.appendChild().
You can understand by using the below example:
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Html table tag
</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>3</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>Output:
JAVASCRIPT:
HTMLTableSectionElement.prototype.sort = function(cb){
Array
.prototype
.slice
.call(this.rows)
.sort(cb)
.forEach((e,i,a)=>{
this.appendChild(this.removeChild(e));
},this);
}
document.querySelector('table').tBodies[0].sort(function(a, b){
return a.textContent.localeCompare(b.textContent);
});Sorting rows with a click on the th element
The below example organises all of the rows in the <tbody> based on the <td> cells present in the rows and adds an event handler to each <th> element of each table in the document.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
Html table tag
</title>
</head>
<body>
<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>
</body>
</html>
Output:
JAVASCRIPT:
const allTables = document .query Selector All (' table ' );
for (let table of all Tables) {
const tBody = table.tBodies[0];
const rows = Array.from(tBody.rows);
const headerCells = table.tHead.rows [0]. cells;
for (let th of headerCells) {
const cellIndex = th.cellIndex;
th.add EventListener ('click', () => {
rows.sort((tr1, tr2) => {
const tr1 Text = tr1. cells[cellIndex].textContent;
const tr2 Text = tr2. cells[cellIndex].textContent;
return tr1Text.localeCompare(tr2Text);
});
tBody. Append (...rows);
});
}
}CSS:
table,
th,
td {
border: 1px solid;
}
table {
width : 100 % ;
max - width: 400px ;
height : 240 px ;
margin : 0 auto ;
display: block ;
overflow -x: auto ;
border - spacing : 0
}
tbody {
white-space: nowrap;
}
th,
td {
padding : 5px 10px;
border - top-width : 0;
border - left - width : 0 ;
}
th {
position: sticky;
top: 0;
background: #fff;
vertical - align: bottom;
}
th:last-child,
td:last-child {
border-right-width: 0;
}
tr:last-child td {
border-bottom-width: 0;
}
Use Of Caption element of table tag:
The caption tag of element tag is used just after table tag tag. The text which is written inside the caption tag should determine the nature of the table. We can also use only one caption element in table tag.
Browser support:
List of browsers that support html table tag are mentioned below:
Chrome: Yes, version 1 needed
Microsoft Edge: Yes, version 12 needed
Firefox: Yes, version 1 needed
Safari: Yes
Opera: Yes