HTML Tables
A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis.
- Tables are useful for various tasks such as presenting text information and numerical data.
- Tables can be used to compare two or more items in tabular form layout.
- Tables are used to create databases.
Example
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
</body>
</html>
Defining an HTML Table
- An HTML table is defined with the “table” tag.
- Each table row is defined with the “tr” tag.
- A table header is defined with the “th” tag.
- By default, table headings are bold and centered.
- A table data/cell is defined with the “td” tag.
Example
<html>
<body>
<h2>Basic HTML Table</h2>
<table style="width:100%">
</body>
</html>
Note:- The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
HTML Table - Adding a Border
- If a border is not specified for the table, it will be displayed without borders.
- A border is set using the CSS border property.
Example
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>This is a Bordered Table</h2>
<table style="width:100%">
</body>
</html>
HTML Table - Collapse Borders
If you want the borders to collapse into one border, add the CSS border-collapse property.
Example
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Collapsed Borders</h2>
<table style="width:100%">
</body>
</html>
HTML Table - Adding Cell Padding
- The space between the cell content and its borders is specified as Cell Padding.
- If you do not specify a padding, the table cells will be displayed without padding.
- The CSS padding property is used to set the cell padding.
Example
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Cellpadding</h2>
<table style="width:100%">
</body>
</html>
HTML Table - Left-align Headings
- By default, table headings are bold and centered.
- The CSS text-align property is used to left-align table headings.
Example
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Left-align Headings</h2>
<table style="width:100%">
</body>
</html>
HTML Table - Adding Border Spacing
- By default, table headings are bold and centered.
- The CSS border-spacing property is used to set the border spacing for a table.
Example
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<h2>Border Spacing</h2>
<table style="width:100%">
</body>
</html>
Note:- If the table has collapsed borders, border-spacing has no effect.
HTML Table - Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute.
Example
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Cell that spans two columns</h2>
<table style="width:100%">
</body>
</html>
HTML Table - Cells that Span Many Rows
The rowspan attribute is used to make a cell span more than one row.
Example
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Cell that spans two rows</h2>
<table style="width:100%">
</body>
</html>
HTML Table - Adding a Caption
The <caption> tag is used to add a caption to a table.
Example
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Table Caption</h2>
<table style="width:100%">
</body>
</html>
Note:- The <caption> tag is inserted immediately after the <table> tag.
A Special Style for One Table
To define a special style for a special table, an id attribute is added to the table.
Example
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Styling Tables</h2>
<table style="width:100%">
</body>
</html>