Creating Tables in HTML: An Introduction to the Table Tag

Introduction

Tables are an essential element of HTML, and are used to display data in a structured format. The table tag is used to create tables in HTML, and it is one of the most versatile tags in the language. In this blog post, we will take a closer look at the table tag and explore how it can be used to create tables in HTML.

Table Tags

<table>	<tr>	<th>	<td>	<thead>
<tbody>	<tfoot>	<colgroup>	<col>	<caption>

In HTML, the following tags are used to create tables:

<table>: Defines a table
<tr>: Defines a table row
<th>: Defines a header cell in a table
<td>:Defines a regular cell in a table
<thead>: Groups the header content in a table
<tbody>: Groups the body content in a table
<tfoot>: Groups the footer content in a table
<colgroup>: Specifies a group of one or more columns in a table for formatting
<col>: Specifies column properties for each column within a <colgroup> element.
<caption>: Defines the caption for a table.

The table tag is used to create tables in HTML. It is an opening tag and must be closed with a closing table tag. The table tag is used in combination with other tags such as tr (table row), th (table header), and td (table data) to create a table.

The tr tag is used to create rows in a table, and the th and td tags are used to create cells. The th tag is used for table headers, and the td tag is used for table data. Table headers are typically used to label the columns of a table, and table data is used to populate the cells of a table.

The table tag can also be used in combination with other attributes such as border, width, and align to control the appearance of the table. The border attribute can be used to set the width of the border around the table, the width attribute can be used to set the width of the table, and the align attribute can be used to set the alignment of the table.

colspan and rowspan are HTML table attributes used to specify the number of columns or rows a table cell should span.

colspan :is used to specify how many columns a cell should span horizontally
rowspan : is used to specify how many columns a cell should span vertically

Tables can also be stylized using CSS. CSS can be used to control the color, size, and spacing of table cells. It can also be used to change the background color of a table, add hover effects, and more.

Here is the simple example program for printing the table

Source Code

<html>
    <head>
        <title> HTML - TABLES</title>
        <link rel="icon" type="image/x-icon" href="img/logo.png">
    </head>
    <body>
        <table border='1' cellpadding='10' cellspacing='10'>
            <caption>Table 1.1</caption>
                <colgroup>
                    <col span="2">
                    <col span="7" bgcolor="#e2ddb8">
                    <col span="2">
                </colgroup>
            <thead>
                <tr>
                    <th colspan='7'>Mark List</th>
                </tr>
                <tr>                
                    <th>SNO</th>
                    <th>NAME</th>
                    <th>ROLLNO</th>
                    <th>TAMIL</th>
                    <th>ENGLISH</th>
                    <th>MATHS</th>
                    <th>TOTAL</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td><sup>2</sup>&#8730; x</td>
                    <td>101</td>
                    <td>76</td>
                    <td>96</td>
                    <td>90</td>
                    <td>272</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Sam</td>
                    <td>102</td>
                    <td bgcolor='red'><font color='white'>85</font></td>
                    <td>79</td>
                    <td>99</td>
                    <td>282</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Ram</td>
                    <td>101</td>
                    <td>76</td>
                    <td>96</td>
                    <td>90</td>
                    <td>272</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Sam</td>
                    <td>102</td>
                    <td>85</td>
                    <td>79</td>
                    <td>99</td>
                    <td>282</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Ram</td>
                    <td>101</td>
                    <td>76</td>
                    <td>96</td>
                    <td>90</td>
                    <td>272</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>Sam</td>
                    <td>102</td>
                    <td>85</td>
                    <td>79</td>
                    <td>99</td>
                    <td>282</td>
                </tr>
            </tbody>
            <tfoot>            
                <tr>
                    <th colspan='6'>Total</th>
                    <th>850</th>
                </tr>
            </tfoot>        
        </table>
    </body>
</html>

To download raw file Click Here

The code is written in HTML and creates a table to display a mark list. The table has several elements such as a caption, header, body, and footer. The <table> element defines the table, with the border, cellpadding, and cellspacing attributes determining the appearance of the table. The <caption> element is used to provide a title for the table, which is "Table 1.1".

The <colgroup> element is used to specify styles for specific columns within the table. In this case, the first two columns are given default styles, while the next seven columns are given a background color of "#e2ddb8".

The <thead> element is used to define the header section of the table, and contains the headers for each column. The first row of headers is created with a <tr> element, and the column headers are defined with <th> elements.

The <tbody> element contains the data for each row in the table, with each row being defined by a <tr> element and each cell within a row being defined by a <td> element. Some cells have special styling, such as a red background color, which is defined with the bgcolor attribute.

The <tfoot> element is used to define the footer section of the table, and in this case, contains the total for the last column. The <th> element is used to define the footer cell, and the colspan attribute is used to span multiple columns.