Creating Tables In HTML

Introduction

HTML provides a simple and easy-to-use syntax for creating tables. Tables can be used to display information in a structured format, making it easier for users to read and understand the data. In addition to text and images, tables can also be used to store links, form elements, and other types of content. By using table elements such as <table>, <tr>, <th>, and <td>, web developers can create tables that are both visually appealing and functional. Overall, learning how to create tables in HTML is an important skill for anyone interested in web development.

Creating Tables in HTML

To create a table in HTML, the <table> tag is used, which is the container for all the table elements. The <tr> tag is used to define table rows, which are the horizontal lines in the table, while the <th> tag is used to define table headers, which are the cells that contain the column labels. Lastly, the <td> tag is used to define table data cells, which are the cells that contain the actual data.

Syntax

<table>
  <tr>
    <th> Table header </th>
  </tr>
  <tr>
    <td> table cell dats</td>
  </tr>
</table>

Example

<!DOCTYPE html>
  <head>
    <title></title>
  </head>
  <body>
   <table>
      <tr>
        <th>Roll</th>
        <th>Name</th>
      </tr>
      <tr>
        <td>01</td>
        <td>Ray</td>
      </tr>
      <tr>
        <td>02</td>
        <td>Paul</td>
      </tr>
    </table>
  </body>
</html>

Output

table

In this example, we write an HTML code that creates a table with two columns - "Roll" and "Name" - and two rows of data. The <table> tag is used to create the table, and <tr> tags are used to create rows. The first row is created using the <th> tag, which defines the header cells of the table. The second and third rows are created using the <td> tag, which defines the data cells of the table.

The table is created here, but there is no border around the cell. Hence, there is no proper border visible.

<!DOCTYPE html>
  <head>
    <title></title>
  </head>
  <body>
   <table border="1">
      <tr>
        <th>Roll</th>
        <th>Name</th>
      </tr>
      <tr>
        <td>01</td>
        <td>Ross</td>
      </tr>
      <tr>
        <td>02</td>
        <td>Paul</td>
      </tr>
    </table>
  </body>
</html>

Output

table

Table attributes in HTML

In HTML, we can specify some attributes in the tables. They are-

border
cellpadding
cellspacing
colspan
rowspan

border attribute

The HTML border attribute is used to add a border around the table and its cells. Setting the border attribute to zero will remove the border from the table. This can be useful when you want to create a table without any visible borders, which can be achieved by setting the border attribute to zero or by using CSS styling.

Example

<table border="1">
    <tr>
      <th>Roll</th>
      <th>Name</th>
      <th>Marks</th>
      <th>Grade</th>
    </tr>
    <tr>
      <td>01</td>
      <td>Raj</td>
      <td>78</td>
      <td>A</td>
    </tr>
    <tr>
      <td>02</td>
      <td>Kajal</td>
      <td>87</td>
      <td>A+</td>
    </tr>
    <tr>
      <td>03</td>
      <td>Jagriti</td>
      <td>63</td>
      <td>B</td>
    </tr>
</table>

Output

table

cellpadding attribute

The cellpadding attribute in HTML allows you to define the spacing between the content within a table cell and its borders. By default, the cellpadding value is set to 1, but you can adjust it to create more or less space according to your design preferences.

Example

<table border="1" cellpadding="5">
    <tr>
      <th>Roll</th>
      <th>Name</th>
      <th>Marks</th>
      <th>Grade</th>
    </tr>
    <tr>
      <td>01</td>
      <td>Raj</td>
      <td>78</td>
      <td>A</td>
    </tr>
    <tr>
      <td>02</td>
      <td>Kajal</td>
      <td>87</td>
      <td>A+</td>
    </tr>
    <tr>
      <td>03</td>
      <td>Jagriti</td>
      <td>63</td>
      <td>B</td>
    </tr>
</table>

cellspacing attribute

The cellspacing attribute, with its default value of 2, allows web developers to control the spacing between cells within a table. By adjusting this attribute, they can create a more visually appealing and organized layout for their table data.

Example

<table border="1" cellspacing="2">
    <tr>
      <th>Roll</th>
      <th>Name</th>
      <th>Marks</th>
      <th>Grade</th>
    </tr>
    <tr>
      <td>01</td>
      <td>Raj</td>
      <td>78</td>
      <td>A</td>
    </tr>
    <tr>
      <td>02</td>
      <td>Kajal</td>
      <td>87</td>
      <td>A+</td>
    </tr>
    <tr>
      <td>03</td>
      <td>Jagriti</td>
      <td>63</td>
      <td>B</td>
    </tr>
</table>

colspan attribute

The "colspan" attribute in HTML tables allows you to merge cells horizontally, spanning across multiple columns. It helps create more complex and visually appealing table layouts by combining cells into a single larger cell.

Example

<table border="1"> 
  <tr> 
    <th colspan="2">Class 11</th> 
    <th colspan="2">Class 12</th> 
  </tr> 
  <tr> 
    <th>Girl</th> 
    <th>Boy</th> 
    <th>Girl</th> 
    <th>Boy</th> 
  </tr> 
  <tr> 
    <td>24</td> 
    <td>45</td> 
    <td>34</td> 
    <td>36</td> 
  </tr> 
</table>

Output

table

rowspan attribute

The rowspan attribute enhances the flexibility of table design by allowing cells to span across multiple rows, enabling the efficient organization of data and enhancing readability. By defining the number of rows a cell should occupy, the rowspan attribute simplifies complex table structures while maintaining a clear and coherent presentation.

Example

<table border="1">
  <tr>
    <th>Month</th>
    <th>Spend</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>10000</td>
    <td rowspan="2">5000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>8000</td>
  </tr>
</table>

Output

table

Other tags in HTML tables

Now, let's see some other tags that are used in tables in HTML.

<caption> tag

The <caption> tag in HTML is utilized to provide a descriptive caption for a table, enhancing its accessibility and understanding for users. It allows developers to succinctly summarize the contents or purpose of the table in a few lines, aiding in better data comprehension.

Example

<table border="1">
  <caption>Student's Data</caption>
  <thead>
    <tr>
      <th>Roll</th>
      <th>Name</th>
      <th>Marks</th>
      <th>Grade</th>
    </tr>
  </thead>
    <tr>
      <td>01</td>
      <td>Raj</td>
      <td>78</td>
      <td>A</td>
    </tr>
    <tr>
      <td>02</td>
      <td>Kajal</td>
      <td>87</td>
      <td>A+</td>
    </tr>
    <tr>
      <td>03</td>
      <td>Jagriti</td>
      <td>63</td>
      <td>B</td>
    </tr>
</table>

<thead> tag

The <thead> tag in HTML is specifically used to define the header section of a table. It contains table headings, such as column labels, which provide a clear context for the table's content.

Example

<table border="1">
  <caption>Student's Data</caption>
  <thead>
    <tr>
      <th>Roll</th>
      <th>Name</th>
      <th>Marks</th>
      <th>Grade</th>
    </tr>
  </thead>
    <tr>
      <td>01</td>
      <td>Raj</td>
      <td>78</td>
      <td>A</td>
    </tr>
    <tr>
      <td>02</td>
      <td>Kajal</td>
      <td>87</td>
      <td>A+</td>
    </tr>
    <tr>
      <td>03</td>
      <td>Jagriti</td>
      <td>63</td>
      <td>B</td>
    </tr>
</table>

<tbody> tag

The <tbody> tag in HTML is essential for organizing and grouping the content within a table. It provides a structured container for the main data rows in the table, separating them from the table header and footer sections.

Example

<table border="1">
  <caption>Student's Data</caption>
  <thead>
    <tr>
      <th>Roll</th>
      <th>Name</th>
      <th>Marks</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>01</td>
      <td>Raj</td>
      <td>78</td>
      <td>A</td>
    </tr>
    <tr>
      <td>02</td>
      <td>Kajal</td>
      <td>87</td>
      <td>A+</td>
    </tr>
    <tr>
      <td>03</td>
      <td>Jagriti</td>
      <td>63</td>
      <td>B</td>
    </tr>
  </tbody>
</table>

<tfoot> tag

The <tfoot> tag is an HTML element that is utilized to designate the footer section of a table. It allows for the logical organization of data within the table structure, separating the header, body, and footer portions for improved readability and accessibility.

Example

<table border="1">
  <caption>Student's Data</caption>
  <thead>
    <tr>
      <th>Roll</th>
      <th>Name</th>
      <th>Marks</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>01</td>
      <td>Raj</td>
      <td>78</td>
      <td>A</td>
    </tr>
    <tr>
      <td>02</td>
      <td>Kajal</td>
      <td>87</td>
      <td>A+</td>
    </tr>
    <tr>
      <td>03</td>
      <td>Jagriti</td>
      <td>63</td>
      <td>B</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Class Topper</td>
      <td>Kajal</td>
      <td>87</td>
      <td>A+</td>
    </tr>
  </tfoot>
</table>

Conclusion

In this article, we learned about HTML tables, how to create them, and the attributes that can be used to create a table; in addition, we also learned about the basic structure of an HTML table, including table headers, rows, and cells. Using the appropriate HTML tags and attributes, we can customize the appearance and functionality of our tables to suit our specific needs. These skills allow us to create visually appealing and organized data displays for our web pages.