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 arrange data like text, images, links, other tables, etc.
  Defining Tables in HTML: 

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 bgcolorbackground, and bordercolor attributes deprecated in HTML5. Do not use these attributes.