HTML TABLE Beginner to Advanced
HTML TABLE HTML tables used to arrange data into rows and columns. We can create a table to display data in tabular form. HTML tables allow web authors to arran
HTML TABLE
- HTML tables used to arrange data into rows and columns.
- We can create a table to display data in tabular form.
- HTML tables allow web authors to arrange data like text, images, links, other tables, etc.
An HTML table is defined with the “<table>” tag. The header section define by "<thead>" tag. The footer section define by "tbody" tag. Each table row is defined with the “<tr>” tag. A table header is defined with the “<th>” tag. By default, table headings are bold and centred. A table data/cell is defined with the “<td>” tag.
Video Link
HTML Table Tags
| Tag | Full Form | Description |
|---|---|---|
| <table> | Table | It defines a table. |
| <tr> | Table Row | It defines a row in a table. |
| <th> | Table Heading | It defines a header cell in a table. |
| <td> | Table Data | It defines a cell in a table. |
| <caption> | Table Title Define | It defines the table caption. |
| <colgroup> | Column Group | It specifies a group of one or more columns in a table for formatting. |
| <col> | Column | It is used with <colgroup> element to specify column properties for each column. |
| <tbody> | Table Body | It is used to group the body content in a table. |
| <thead> | Table Head | It is used to group the header content in a table. |
| <tbody> | Table Body | It is used to group the footer content in a table. |
HTML Table with Border
There are two ways to specify border for HTML tables. 1. By border attribute of table in HTML The border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border, then you can use border = "0".<table border="1" > </table>2. By border property in CSS It is now recommended to use border property of CSS to specify border in table.
<style>
table, th, td {
border: 1px solid #000;
}
</style>
HTML Table with rowspan
If you want to make a cell span more than one row, you can use the rowspan attribute. It will divide a cell into multiple rows. The number of divided rows will depend on rowspan values.HTML Table with colspan
If you want to make a cell span more than one column, you can use the colspan attribute. It will divide one cell/row into multiple columns, and the number of columns depend on the value of colspan attribute.HTML Table width:
We can specify the HTML table width using the CSS width property. It can be specify in pixels or percentage.table{
width: 100%;
}
HTML Table Example
<!DOCTYPE html>
<html>
<head>
<title>HP TECH</title>
</head>
<body>
<h1 id="name" class="title" style="color: red;">HI!</h1>
<table border="1" style="width: 30%;">
<colgroup>
<col span="1">
<col span="1" style="background-color: rgb(144, 255, 255);">
<col span="1" style="background-color: rgb(164, 163, 255);">
</colgroup>
<caption>HP TECH</caption>
<thead>
<tr>
<th>ID</th>
<th>Status</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Active</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>Active</td>
<td>200</td>
</tr>
<tr>
<td>3</td>
<td>Active</td>
<td rowspan="2">100</td>
</tr>
<tr>
<td>4</td>
<td>Active</td>
</tr>
<tr>
<td>Total</td>
<td align="center" colspan="2">400</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Note:− The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use these attributes.
Subscribe to our newsletter
Read and share new perspectives on just about any topic. Everyone's welcome.👋
We care about the protection of your data. Read our
Privacy Policy.
Responses (0)
Loading comments...