CSS Tables
You can enhance the appearance of an HTML table using CSS styling.
| Company |
Contact |
Country |
| Alfreds Futterkiste |
Maria Anders |
Germany |
| Berglunds snabbköp |
Christina Berglund |
Sweden |
| Centro comercial Moctezuma |
Francisco Chang |
Mexico |
| Ernst Handel |
Roland Mendel |
Austria |
| Island Trading |
Helen Bennett |
UK |
| Königlich Essen |
Philip Cramer |
Germany |
| Laughing Bacchus Winecellars |
Yoshi Tannamuri |
Canada |
| Magazzini Alimentari Riuniti |
Giovanni Rovelli |
Italy |
Table Borders
To define the borders of a table using CSS, employ the 'border' property within a border property.
The following example sets a solid border for <table>, <th>, and <td> elements:
| Firstname |
Lastname |
| Peter |
Griffin |
| Lois |
Griffin |
Full-Width Table
The table you see above might appear small sometimes. If you want a table to cover the whole screen width, you can do so by adding width: 100% to the <table> element:
| Firstname |
Lastname |
| Peter |
Griffin |
| Lois |
Griffin |
Collapse Table Borders
The border-collapse property decides whether the borders of a table should be combined into one single border or not.
| Firstname |
Lastname |
| Peter |
Griffin |
| Lois |
Griffin |
If you just want a border around the table, you should only set the border property for the <table> element:
| Firstname |
Lastname |
| Peter |
Griffin |
| Lois |
Griffin |
Table Width and Height
The size of a table is determined by the width and height properties, which are specified using HTML tags and can also have associated classes.
The following example makes the table as wide as the available space (100% width) and sets the height of the header cells ( elements) to 70 pixels.
| Firstname |
Lastname |
Savings |
| Peter |
Griffin |
$100 |
| Lois |
Griffin |
$150 |
| Joe |
Swanson |
$300 |
To make a table that covers only half of the page, you can use the HTML code with the following style attribute: width: 50%:
By default, the text inside <th> tags is placed in the middle, while the text inside <td> tags is positioned to the left.
To make the content inside <td> elements appear in the center, apply the style text-align center.
Horizontal Alignment
The text-align attribute positions the content horizontally within <th> or <td>. elements, determining whether it should be aligned to the left, right, or center.
Typically, the text inside <th> elements is centered, while the content within <td> elements is aligned to the left.
To make the content inside <td> elements centered, apply the style text-align: center.
To make the content align to the left, ensure that the alignment of <th> elements is set to left-aligned using the property text-align: left
Vertical Alignment
The vertical-align feature determines how content inside <th> or <td> is aligned vertically, such as at the top, bottom, or middle.
The content in a table is usually centered vertically by default, whether it's in a <th> or <td> element.
Responsive Table
If the screen is too small to show all the content, a responsive table will have a horizontal scroll bar.
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid;
}
table {
width: 100%;
}
</style>
</head>
<body>
<h2>Full-width Table</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table,
td,
th {
border: 1px solid;
}
table {
width: 100%;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Let the table borders collapse</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border: 1px solid;
}
</style>
</head>
<body>
<h2>Single Border Around The Table</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 70px;
}
</style>
</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 50%;
}
</style>
</head>
<body>
<h2>A table that only span half the page</h2>
<p>Set the width of the table to 50%:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
text-align: center;
}
</style>
</head>
<body>
<h2>The text-align Property</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>Responsive Table</h2>
<p>If the screen is too small to show all the content, a responsive table will show a horizontal scroll bar. Try resizing the browser window to see this in action:</p>
<p>To make a table that adjusts well on different screen sizes, put a container element (such as div) with <strong>overflow-x:auto</strong> around the table element. </p>
<div style="overflow-x: auto;">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
<td>94</td>
</tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
<td>67</td>
</tr>
</table>
</div>
</body>
</html>
HTML
CSS
Javascript
Jquery
PHP
MySQL