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:
{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
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 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 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:
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 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:
| First Name | Last Name |
|---|---|
| Rahul | Gautam |
| Subodh | Kumar |
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 - 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:
| Name | Age | |
|---|---|---|
| AKASH | SINGH | 20 |
| AMAN | WILLSON | 14 |
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:
| AKASH | TIMES |
|---|---|
| Phone | 123-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.
