HTML Table

Web developers can put data into rows and columns using HTML tables.

Table in HTML

The HTML table tag shows data in a table format (row by column). A row can have more than one column.

With the help of the tr>, td>, and th> elements, we can use the table> element to make a table that shows data in a table format.

In each table, the tr> tag defines the table row, the th> tag defines the table header, and the td> tag defines the table data.

HTML tables are used to control the layout of a page, such as the header, navigation bar, main content, footer, etc. But you should use a div tag instead of a table to control how the page looks.

HTML Table Tags

<table>

What a table is.

<th>

Describes a table\’s header cell.

<tr>

Explains what a table row is.

<td>

Explains what a table cell is.

<caption>

shows what a table caption is.

<colgroup>

Sets the style for a group of one or more columns in a table.

<col>

Sets the column properties for each column in a colgroup> element.

<thead>

Table header content is grouped.

<tbody>

Makes a table with the body content

<tfoot>

Puts the content of the footer in a table.

Tag Description
<table> Defines a table
<tr> Defines a row in a table
<th> Defines a header cell in a table
<td> Defines a cell in a table
<caption> Defines the table caption.
<colgroup> Specifies a group of one or more columns in a table for formatting.
<col> col is used with <colgroup> element to specify column properties for each column.
<tbody> Used to group the body content in a table.
<thead> Used to group the header content in a table.
<tfooter> Used to group the footer content in a table.

Table in HTML with a Border

There are two ways to tell HTML tables what kind of border to use.

  1. By the table\’s border attribute in HTML
  2. By using the CSS border property

Example

<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>

<h2>HTML table basic example</h2>

<table style=\”width:100%\”>
<tr>
<th>Id</th>
<th>Name</th>
<th>City</th>
</tr>
<tr>
<td>1</td>
<td>Ram</td>
<td>Germany</td>
</tr>
<tr>
<td>1</td>
<td>Shyam</td>
<td>Mexico</td>
</tr>
</table>

<p>To make the example better, we have added borders to the table.</p>

</body>
</html>

Output

\"html

 

HTML Table with with cell padding

There are two ways to set the padding for a table header and table data:

  1. By using the cellpadding attribute of an HTML table
  2. By using the CSS padding property

The HTML table tag\’s cellpadding attribute is no longer used. The best thing to do is to use CSS. So, let\’s look at CSS\’s code.

Example

<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr><th>Name</th><th>City</th><th>Country</th></tr>
<tr><td>Ram</td><td>Mumbai</td><td>India</td></tr>
<tr><td>Shyam</td><td>Chennai</td><td>India</td></tr>
<tr><td>Suman</td><td>Varanasi</td><td>India</td></tr>
<tr><td>Sita</td><td>Delhi</td><td>India</td></tr>
</table>
</body>
</html>

Output

\"table

Table width in HTML:

The CSS width property lets us set the width of an HTML table. It can be given as a number of pixels or a percentage.

We can adjust our table width as per our requirement. Here\’s an example of how to show a table with its width.

Example

<!DOCTYPE html>
<html>
<head>
<title>table</title>
<style>
table{
border-collapse: collapse;
width: 100%;
}
th,td{
border: 3px solid orange;
padding: 15px;
}

</style>
</head>
<body>
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>2 one</td>
<td>2 two</td>
<td>2 three</td>
</tr>
<tr>
<td>3 data</td>
<td>3 data</td>
<td>3 data</td>
</tr>
</table>
</body>
</html>

Output

\"Table

 

Using colspan in an HTML table

You can use the colspan attribute to make a cell cover more than one column.

It will split one cell/row into more than one column, with the number of columns depending on the value of the colspan attribute.

Let\’s look at the example that goes across both columns.

Example

<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style=\”width:100%\”>
<tr>
<th>Name</th>
<th colspan=\”2\”>Education</th>
</tr>
<tr>
<td>Ram</td>
<td>B.tech</td>
<td>M.tech</td>
</tr>
</table>
</body>
</html>

Output

\"colspan

 

Adding rowspan to an HTML table

You can use the rowspan attribute to make a cell cover more than one row.

It splits a cell into more than one row. rowspan values determine how many rows will be split.

Let\’s look at the one that goes across two rows.

Example

<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr><th>Name</th><td>Ram</td></tr>
<tr><th rowspan=\”2\”>Education</th><td>B.tech</td></tr>
<tr><td>M.tech</td></tr>
</table>
</body>
</html>

Output

\"rowspan

 

Table in HTML with caption

Above the table, the HTML caption is shown. It can only be used after the table tag.

Example

<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<caption>Student Sheet</caption>
<tr><th>Name</th><th>City</th><th>Country</th></tr>
<tr><td>Ram</td><td>Mumbai</td><td>India</td></tr>
<tr><td>Shyam</td><td>Chennai</td><td>India</td></tr>
<tr><td>Suman</td><td>Varanasi</td><td>India</td></tr>
<tr><td>Sita</td><td>Delhi</td><td>India</td></tr>
</table>
</body>
</html>

Output

\"table

How to style even and odd cells in an HTML table

Using different CSS properties in your table, you can also make different kinds of tables.

Example

<!DOCTYPE>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
table#alter tr:nth-child(even) {
background-color: #ddd;
}
table#alter tr:nth-child(odd) {
background-color: #f1f1f1;
}
table#alter th {
color: white;
background-color: black;
}
</style>
</head>
<body>
<table id=\”alter\”>
<tr><th>Name</th><th>City</th><th>Country</th></tr>
<tr><td>Ram</td><td>Mumbai</td><td>India</td></tr>
<tr><td>Shyam</td><td>Chennai</td><td>India</td></tr>
<tr><td>Suman</td><td>Varanasi</td><td>India</td></tr>
<tr><td>Sita</td><td>Delhi</td><td>India</td></tr>
</table>
</body>
</html>

Output

\"table

Related Posts
Introduction to HTML

HTML Introduction HTML is the most common language used to mark up Web pages. What does HTML mean? Hyper Text Read more

What is HTML

HTML stands for Hyper Text Markup Language, which is a programming language used to make web pages and web apps. Read more

HTML Basic Examples

In this chapter, we\'ll show you some simple examples of HTML code. Don\'t worry if we use tags that you Read more

HTML text Editors

Editors for HTML text HTML files are text files, so any text editor can be used to make them. Text Read more

HTML Tags

Learn HTML Tags HTML tags are kind of like keywords that tell a web browser how to format and show Read more

HTML Elements

Elements make up an HTML file. These elements are what make web pages and tell you what content is on Read more

HTML Attributes

Attribute in HTML Attributes in HTML are special words that tell you more about an element. Attributes change the way Read more

HTML Headings

Headings in HTML The <h1> to <h6> tags are used to set up headings in HTML. <h1> shows which heading Read more

Scroll to Top