HTML TABLE Beginner to Advanced

By HP KINGDOM |

Updated on 06 Dec 23

HTML

Facebook

Twitter

Others

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>