Tables with rows and columns are something we’re all familiar with. However, how do you make a table in a website? A table is shown in a webpage using the HTML table tag family. It has the same structure as a matrix, with the same rows and columns. This style of row-and-column arrangement is highly useful for displaying facts in an ordered manner. The tabular format of the data makes a favorable impact on the user.

HTML table allows you to arrange data into rows and columns. They are commonly used to display tabular data like product listings, customer’s details, financial reports, and so on.

You can create a table using the <table> element. Inside the <table> element, you can use the <tr> elements to create rows, and to create columns inside a row you can use the <td> elements. You can also define a cell as a header for a group of table cells using the <th> element.

The following example demonstrates the most basic structure of a table.

Example of HTML table tag:

Lets see the first example of how to use HTML table tags. Just observe the example for now; we have explained each tag one by one after the example.

Example

<!DOCTYPE html>
<html lang=”en”>
<HTML>
<head>
<meta charset=”UTF-8″>
<title> HTML Table </title>
</head>
<body>
<table>
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr> <td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table> </body>
</html>

Output

NameSalary  Age
Anshuman  Rs. 2,00,000  25
Kuldeep  Rs. 5,00,000  22

HTML Table Row tag <tr>

HTML table row is defined by <tr> tag. It is a paired tag with </tr> as a closing tag. Whatever written between these tags will be displayed in a single row of the table.

To create a new row, add another <tr> tag after closing the previous one.

HTML Table header tag <th>

HTML table header is a special case of a table row. It starts with <th> tag and ends with </th> tag. The difference between a row and a heading is that text written inside <th> tags is displayed in bold font, and centered aligned by the browser. Because of its properties this tag is used only for writing headings in the table.

HTML Table cell tag <td>

HTML table cell is defined by <td> tag. It is a paired tag with </td> as a closing tag. Each pair of these tags represents a cell in a row.

It can only be used inside &glt;tr> or <td> tags. After declaring rows, the <td> tags are used to enter data in the table. Whatever is written inside the <td> and </td> tags will be displayed by the browser in the tables as it is.


HTML Table Attributes

The <table> Tag in HTML has many attributes that define the structure of the table. These attributes can make a table look a bit more attractive. Let’s see one by one the different attributes of the table tag and then we will use them in an example and will see the changes in the table.

HTML table border Attribute

HTML table border attribute is used to specify borders in a table. It means that, by default the borders in the table are hidden and if you don’t specify borders then your table will only display data but there would be no border.

The table border attribute has two values 0 and 1. 0 means no border and 1 means visible borders. You can also increase the values to 2, 3, 4, etc. it will increase the width of the border.

There are two ways to specify border for HTML tables:

  • By border attribute of table in HTML.
  • By CSS borders property.

Look at the example below to define an HTML border with border attribute:

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> HTML Table Border Attribute </title>
</head>
<body>
<table border=”1″ width=”100%”>
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>

Output

NameSalaryAge
AnshumanRs. 2,00,00025
KuldeepRs. 5,00,00022

Note: The width and height attributes are used to resize the table.


HTMl Table border using CSS

You can use CSS stylesheet to make table borders more attractive. Try changing border colors in the try-it editor.

Example

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> HTML Table Border Style </title>
<style>
table, th, td {
border: 1px solid black;
text-align: center;
}
</style>

</head>
<body>
<table width=”100%”>
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>

Output

NameSalaryAge
AnshumanRs. 2,00,00025
KuldeepRs. 5,00,00022


HTML Table Cellpadding and Cellspacing attributes

HTML table "cellpadding" and "Cellspacing" attributes are used to adjust the padding and margins in within table cells.

HTML Table Cellpadding attribute

The Cellpadding attribute is used to specify the space between the content of the cell and its borders. It provides padding to the content in the cell.

As you increase the value, the space between the cell’s content and its border also increases. The default value of cellpadding is taken in pixels by browsers. The cellpadding is applied to all the four sides of the content. The value can also be defined in percentages.

Cellspacing attribute

The Cellspacing attribute is used to specify the space between the cells of the table. Its value can be in pixels or in percentages. It is applied to all the sides of the cells.

Note: These two attributes are no longer a part of HTML 5. So, it is better to use CSS to color the tables.

Example of cellspacing and cellpadding

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> HTML Table Cellpadding Attribute </title>
</head>
<body>
<table border=”1″ cellpadding="5" cellspacing="5" style=”width:100%”>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Peter</td>
<td>5000</td>
</tr>
<tr>
<td>John</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

Output

Name
Salary
Peter5000
John7000

HTML Table Colspan and Rowspan Attribute

The td> tag uses the HTML table colspan and rowspan attributes. As the name implies, ‘colspan’ is concerned with columns, while ‘rowspan’ is concerned with rows.


These two properties are used to join two or more columns or rows together. The value of the table colspan attribute indicates how much column space it will take up. For example, ‘td colspan= 2>’ will generate a cell that occupies the space of two cells horizontally, i.e. a cell in the following column.


Table rowspan, on the other hand, will construct a cell that will vertically occupy the space of two or more (as defined) cells, i.e. cells in the following rows. Take a look at the sample below to get a better understanding of the topic.

Example of HTML table rowspan

HTML table rowspan attribute is used to merge two or more rows together to form a single row. A single row occupies space of the number of merged rows. Look at the example:

Example

<!DOCTYPE html>
<html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style=”width:100%”>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan=”2″>Telephone:</th>
<td>9998887776</td>
</tr>
<tr>
<td>9998887776</td>
</tr>
</table>
</body>
</html>

Output

Name:Bill Gates
Telephone:9998887776
9998887776

Example of HTML table colspan

HTML table colspan attribute is used to merge two or more columns into a single column. Single column occupies space of the number of merged columns. Look at the example:

Example

<!DOCTYPE html>
<html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> HTML Table Colspan Attribute </title>
</head>
<body>
<table border=”1″ width=”80%”>
<tr>
<th> Person_Name </th>
<th colspan="2"> Mobile </th>
</tr>
<tr>
<td> Bill Gates </td>
<td> 9998887776 </td>
<td> 9998887775 </td>
</tr>
</table>
</body>
</html>

Output

Person_Name
Mobile
Bill Gates99988877769998887775

HTML table Caption attribute

HTML table caption attribute defines a caption to the table. It gets displayed with table as its name. To add a caption to a table, use the <caption> tag.

  • A caption can be aligned around the table by using align attribute with values – left/right/top/bottom.
  • The default alignment is top.
Example of HTMl table caption attribute

<!DOCTYPE html>
<html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title> HTML Table Caption Attribute </title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>

Output

Monthly savings
MonthSavings
January$100
February$50

HTML table bgcolor attribute

The bgcolor element in HTML tables is used to provide the table a background color. You can easily type any color name or provide a HEX code to set a color. This attribute can also be used with the td> tag to specify the color of a specific table cell.

HTML table background attribute

HTML table background attribute is used to add a background image in the table. The image in the table will work as a background behind the data in the table. It can be used with <td> tag.



Leave a Comment

Your email address will not be published.