HTML Tables Tutorial - Tag, Element, Example and Importance

A Complete Guide to HTML Tables - Newbie to Advanced Level Information

The table element is an essential part of HTML; Tables in HTML are used for arranging data in rows and columns.

Creating HTML Table from HTML is a very simple task.

In this Lesson, we will give you complete information about creating a table in an HTML document. You will know how to make a table in HTML? Which HTML element is used to create a table in HTML?

To simplify the HTML Table Concept, we have divided this Lesson into small parts. The list of these sections is given below:

HTML Tables Tutorial

{tocify} $title={Table of Contents}

Introduction to HTML Table

The Table is defined by the Table Element in HTML Document. A table is started by Opening <table> Tag. And the closing of the Table is done by the Closing </table> tag.

Through the Table, we represent the data in Tabular Format. This data includes types of data like Texts, Images, Videos, Links, etc. We can show any data in the Table per our requirements.

What is a table in HTML?

HTML tables allow web developers to arrange data, such as text, links, images, etc., into rows and columns of cells. 

You can arrange the data in rows and columns by making a table according to the data in the HTML document.

HTML tables are created using the <table> tag, in which the <tr> tag is used to create table rows, and the <td> tag is used to create data cells.

Structure of an HTML Table

Structure of an HTML Table


You can see from the above photo that a table consists of Rows, Columns, and Cells. These three elements are the basis of a table.

  • Columns: The green sign om table is called Column. In a table, you can Add and Remove Columns as per your requirement. A column is formed from two vertical lines.
  • Rows: The orange horizontal lines in the table is called a Row. Rows are precisely the opposite of a Column. A row is formed from two horizontal lines. The row is defined by <tr> Element in HTML Table.
  • Cell: The cell is made up of Rows and Columns. When Columns and Rows collide with each other, then a cell is formed. Actual data in the HTML table is defined in cells only. Table Data, i.e., Cell is defined by <td> Element.

Names and Usage of Some Important Tags Related to HTML Table

Table Element defines HTML Table. But, Table Element alone cannot make a table. Some other tags are also used to create a complete table. Which are mentioned below:

  • <table> – HTML Table is defined by this element.
  • <tr> – The full name of this element is Table Row. Table Row Elements define Table Rows.
  • <td> – The full name of this element is Table Data. It is also known as Cell Data. Table Data is defined in a table from Table Data.
  • <th> – The full name of this element is Table Heading. It is used to define Headings in Table.
  • <caption> - This element defines the table's title.

Creating an HTML Table

Please copy the below HTML code and paste it into your notepad or type this code manually and save the file as htmltable.html. And open it in your browser.

Example:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport' />

<title>HTML Table Example</title><body>

</head>
<body>

<table border=”1″>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>

</body>
</html>{codeBox}

When you save the above code and open it in your favorite browser, you will get results like this.

Output:

Row 1, Column 1Row 1, Column 2
Row 2, Column 1Row 2, Column 2

Understand the Example:

We have created a Simple HTML Table from the above code. In which 2 Rows and 4 Columns have been defined. 

<tr> Tag has been used to describe Table Rows. 

And <td> Tag has been used to determine Data Cells in Table Rows.

Note: You want to define as many Columns in a Row. You have to define as many <td> tags.

Giving a Title to the Table

The <caption> element is used to define the title of the HTML table. By giving a title to a table, it is easy to identify the table. You can assign different titles to different types of tables.

Try this:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport' />

<title>HTML Table Example</title><body>

</head>
<body>

<table border=”1″>
<caption>My First HTML Table</caption>
<tr>
<td>Row 1, Column 1 </td>
<td>Row 1, Column 2 </td>
</tr>
<tr>
<td>Row 2, Column 1 </td>
<td>Row 2, Column 2 </td>
</tr>
</table>

</body>
</html>{codeBox}

The above code will give you a result like this:

Output:

My First HTML Table
Row 1, Column 1Row 1, Column 2
Row 2, Column 1Row 2, Column 2

Understand the Example:

In the HTML table given above, we have defined the title. For this, we have used <caption> tag. 

We have provided this table with the title My First HTML Table. You can give any title as per your wish. 

To provide a title, <caption> Tag has to be defined immediately after <table> Tag.

Creating Heading in Table

<th> Tag is used to creating Heading in HTML Table. The full name of this element is Table Heading

In the Heading in the Table, we give a different name to each column. Due to this, it becomes easy to identify the data available in that column. 

The Table Heading is, By Default, Bold and Center Aligned. You can also override this setting through CSS.

The Table Heading is mainly defined in the first row of the Table. You can give the name of Headings according to your Table Data.

Try this:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport' />

<title>HTML Table Example</title><body>

</head>
<body>

<table border=”1″>
<caption>Heading in HTML Table</caption>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Rahul</td>
<td>Gautam</td>
</tr>
<tr>
<td>Subodh</td>
<td>Kumar</td>
</tr>
</table>

</body>
</html>{codeBox}

The above code will give you a result like this:

Output:

Heading in HTML Table
First NameLast Name
RahulGautam
SubodhKumar

HTML Table Borders

Border Attribute is used to create a border all around the Table. If you want to show the Border in the Table, then keep the Value "1". 

And if you do not want to show the Border, keep the value "0".

Apart from applying Border, you can also set Border Color. The border-color attribute is used to set the border color. You can set the color of your choice.

How To Add a Border

When you add a border to a table, you also add borders to almost each table cell:

   
   
   

To add a border, use the CSS border property on table, th, and td elements:

Example

table, th, td {
  border: 1px solid #333;
}{codeBox}

Collapsed Table Borders

To bypass having double borders like in the example above, set the CSS border-collapse property to collapse.

This will make the borders collapse into a single border:

   
   
   

Example

table, th, td {
  border: 1px solid #333;
  border-collapse: collapse;
}{codeBox}

Style Table Borders

If you specify a background color of each cell, and provide the border a white color (the exact as the document background), you get the appearance of an invisible border:

   
   
   

Example

table, th, td {
  border: 1px solid #ffffff;
  border-collapse: collapse;
}
th, td {
  background-color: #ffa68a;
}{codeBox}

Round Table Borders

With the border-radius property, the borders get rounded corners:

   
   
   

Example

table, th, td {
  border: 1px solid #ffffff;
  border-radius: 10px;
}{codeBox}

Cut the border around the table by vacating out table from the css selector:

   
   
   

Example

th, td {
  border: 1px solid #333;
  border-radius: 10px;
}{codeBox}

Dotted Table Borders

With the border-style property, you can specify the formation of the border.

   
   
   

Values that are allowed:

  • dotted
  • Dashed
  • strong
  • dual
  • grooves
  • ridge
  • insert
  • outset
  • none
  • hidden

Example

 th, td {
  border-style: dotted;
}{codeBox}

Border Color

With the border-color property, you can specify the color of the border.

   
   
   

Example

 th, td {
  border-color: #03a9f4;
}{codeBox}

Setting the Height and Width of the Table

   
   
   
   
   
   
   
   

Utilize the style attribute with the width or height properties to determine the size of a table, row, or column.

HTML Table Width

To specify the width of a table, add the style attribute to the <table> element:

Example

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport' />

<title>HTML Table Example</title><body>

</head>
<body>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>AKASH</td>
<td>SINGH</td>
<td>20</td>
</tr>
<tr>
<td>AMAN</td>
<td>WILLSON</td>
<td>14</td>
</tr>
</table>

</body>
</html>{codeBox}

HTML Table Column Width

   
   
   

To set the size of a column, add the style attribute on a <th> or <td> element:

Example

Set the width of the first column to 60%:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport' />

<title>HTML Table Example</title><body>

</head>
<body>

<table style="width:100%">
<tr>
<th style="width:60%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>AKASH</td>
<td>SINGH</td>
<td>20</td>
</tr>
<tr>
<td>AMAN</td>
<td>WILLSON</td>
<td>14</td>
</tr>
</table>

</body>
</html>{codeBox}

HTML Table Row Height

   
   
   

To specify the height of a specific row, add the style attribute on a table row element:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport' />

<title>HTML Table Example</title><body>

</head>
<body>

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>AKASH</td>
<td>SINGH</td>
<td>20</td>
</tr>
<tr>
<td>AMAN</td>
<td>WILLSON</td>
<td>14</td>
</tr>
</table>

</body>
</html>{codeBox}

HTML Table Padding and Spacing

HTML tables can modify the padding inside the cells and also the space between the cells.

HTML Table Padding and Spacing

HTML Table - Cell Padding

Cell padding is the distance between the cell edges and the cell content.

By default, the padding is specified as 0.

To add padding on table cells, use the CSS padding property:

Example

th, td {
  padding: 12px;
}{codeBox}

Note: You can also use other properties like - padding-bottom, padding-left, and padding-right -

Example

th, td {
  padding-top: 12px;
  padding-bottom: 22px;
  padding-left: 34px;
  padding-right: 42px;
}{codeBox}

HTML Table - Cell Spacing

Cell spacing is the space between each cell.

By default, the distance is set to 2 pixels.

To adjust the space between table cells, utilize the CSS border-spacing property on the table element:

Example

table {
  border-spacing: 32px;
}{codeBox}

HTML Table Colspan & Rowspan

HTML tables can have cells that span over multiple rows and columns.

NAME 
   
   
   
   
MARCH  
  
  
   
   
2023
   
HOLI 
 
   

When we want to write data in more than one Row and Column in the Table, we have to use colspan and rowspan Attributes.

Colspan Attribute merges two or more columns to form a single column. And Rowspan Attribute merges two or more Rows to make one Row.

HTML Table - Colspan

To create a cell span over multiple columns, use the colspan attribute:

Example

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport' />

<title>HTML Table Example</title><body>

</head>
<body>

<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>AKASH</td>
<td>SINGH</td>
<td>20</td>
</tr>
<tr>
<td>AMAN</td>
<td>WILLSON</td>
<td>14</td>
</tr>
</table>

</body>
</html>{codeBox}

Output:

NameAge
AKASHSINGH20
AMANWILLSON14

Note: The value of the colspan attribute describes the number of columns to span.

HTML Table - Rowspan

To create a cell span over multiple rows, use the rowspan attribute:

Example

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport' />

<title>HTML Table Example</title><body>

</head>
<body>

<table>
<tr>
<th>AKASH</th>
<td>TIMES</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>123-1234</td>
</tr>
<tr>
<td>789-8745</td>
</tr>
</table>

</body>
</html>{codeBox}

Output:

AKASHTIMES
Phone123-1234
789-8745

What have you learned?

In this lesson, we have given you complete information about HTML Table. You know that HTML Table is defined by a Table Element. 

Apart from this, you have also learned about some essential attributes. This lesson will 
be helpful for you.

Conclusion:

Friends, according to my expertise, I have written complete information to help you with “HTML Tables.” If this post is favorable for you or not, please tell me by commenting.

If you liked this post, do not forget to share it with your friends so they can get information about it.

You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.

Please tell us through the comment section if you think we miss anything.

Post a Comment

If you have any problem please feel free to contact us by - AKASH TIMES

Previous Next

نموذج الاتصال