<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
Output:
HTML Table
|
Company
|
Contact
|
Country
|
|
Alfreds Futterkiste
|
Maria Anders
|
Germany
|
|
Centro comercial Moctezuma
|
Francisco Chang
|
Mexico
|
|
Ernst Handel
|
Roland Mendel
|
Austria
|
|
Island Trading
|
Helen Bennett
|
UK
|
|
Laughing Bacchus Winecellars
|
Yoshi Tannamuri
|
Canada
|
|
Magazzini Alimentari Riuniti
|
Giovanni Rovelli
|
Italy
|
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.
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Output:
Basic HTML Table
|
Firstname
|
Lastname
|
Age
|
|
Jill
|
Smith
|
50
|
|
Eve
|
Jackson
|
94
|
|
John
|
Doe
|
80
|
Note: The
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
<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 you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS
border property:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Bordered Table</h2>
<p>Use the CSS border property to add a border to the table.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Output:
Bordered Table
Use the CSS border property to add a border to the table.|
Firstname
|
Lastname
|
Age
|
|
Jill
|
Smith
|
50
|
|
Eve
|
Jackson
|
94
|
|
John
|
Doe
|
80
|
HTML Table - Collapsed Borders
If you want the borders to collapse into one border, add the CSS
border-collapse property:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-collapse property.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Output:
Collapsed Borders
If you want the borders to collapse into one border, add the CSS border-collapse property.|
Firstname
|
Lastname
|
Age
|
|
Jill
|
Smith
|
50
|
|
Eve
|
Jackson
|
94
|
|
John
|
Doe
|
80
|
HTML Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS
padding property:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the padding to 5px.</p>
</body>
</html>
Output:
Cellpadding
Cell padding specifies the space between the cell content and its borders.|
Firstname
|
Lastname
|
Age
|
|
Jill
|
Smith
|
50
|
|
Eve
|
Jackson
|
94
|
|
John
|
Doe
|
80
|
HTML Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS
text-align property:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<h2>Left-align Headings</h2>
<p>To left-align the table headings, use the CSS text-align property.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Output:
Left-align Headings
To left-align the table headings, use the CSS text-align property.|
Firstname
|
Lastname
|
Age
|
|
Jill
|
Smith
|
50
|
|
Eve
|
Jackson
|
94
|
|
John
|
Doe
|
80
|
HTML Table - Adding Border Spacing
Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS
border-spacing property:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the border-spacing to 5px.</p>
</body>
</html>
Output:
Border Spacing
Border spacing specifies the space between the cells.|
Firstname
|
Lastname
|
Age
|
|
Jill
|
Smith
|
50
|
|
Eve
|
Jackson
|
94
|
|
John
|
Doe
|
80
|
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:
<!DOCTYPE html>
<html>
<head>
<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 columns</h2>
<p>To make a cell span more than one column, use the colspan attribute.</p>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
</body>
</html>
Output:
Cell that spans two columns
To make a cell span more than one column, use the colspan attribute.|
Name
|
Telephone
|
|
|
Bill Gates
|
55577854
|
55577855
|
HTML Table - Cells that Span Many Rows
To make a cell span more than one row, use the
rowspan attribute:
<!DOCTYPE html>
<html>
<head>
<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>
<p>To make a cell span more than one row, use the rowspan attribute.</p>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html>
Output:
Cell that spans two rows
To make a cell span more than one row, use the rowspan attribute.|
Name:
|
Bill Gates
|
|
Telephone:
|
55577854
|
|
55577855
|
HTML Table - Adding a Caption
To add a caption to a table, use the
<caption> tag:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Table Caption</h2>
<p>To add a caption to a table, use the caption tag.</p>
<table style="width:100%">
<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:
Table Caption
To add a caption to a table, use the caption tag.|
Monthly savings
|
|
|
Month
|
Savings
|
|
January
|
$100
|
|
February
|
$50
|
Note: The
<caption> tag must be inserted immediately after the <table> tag.
A Special Style for One Table
To define a special style for a special table, add an
id attribute to the table:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<h2>Styling Tables</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Output:
Styling Tables
|
Firstname
|
Lastname
|
Age
|
|
Jill
|
Smith
|
50
|
|
Eve
|
Jackson
|
94
|
|
John
|
Doe
|
80
|
|
Firstname
|
Lastname
|
Age
|
|
Jill
|
Smith
|
50
|
|
Eve
|
Jackson
|
94
|
|
John
|
Doe
|
80
|
No comments