The look of an HTML table can be greatly improved with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even) {background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<h1>A Fancy Table</h1>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Tech Solutions</td>
<td>Anil Kumar</td>
<td>India</td>
</tr>
<tr>
<td>Future Group</td>
<td>Emma Johnson</td>
<td>USA</td>
</tr>
<tr>
<td>Green Grocers</td>
<td>Hiro Tanaka</td>
<td>Japan</td>
</tr>
<tr>
<td>Skyline Developers</td>
<td>Michael Chen</td>
<td>China</td>
</tr>
<tr>
<td>World Innovations</td>
<td>Laura Martinez</td>
<td>Spain</td>
</tr>
<tr>
<td>Northern Traders</td>
<td>Olivia Brown</td>
<td>Canada</td>
</tr>
<tr>
<td>Urban Delights</td>
<td>Marco Rossi</td>
<td>Italy</td>
</tr>
<tr>
<td>Continental Corp</td>
<td>James Smith</td>
<td>Australia</td>
</tr>
<tr>
<td>Pure Foods</td>
<td>Sophia Nguyen</td>
<td>Vietnam</td>
</tr>
<tr>
<td>Global Supplies</td>
<td>Liam Wilson</td>
<td>UK</td>
</tr>
</table>
</body>
</html>
| Company | Contact | Country |
|---|---|---|
| Tech Solutions | Anil Kumar | India |
| Future Group | Emma Johnson | USA |
| Green Grocers | Hiro Tanaka | Japan |
| Skyline Developers | Michael Chen | China |
| World Innovations | Laura Martinez | Spain |
| Northern Traders | Olivia Brown | Canada |
| Urban Delights | Marco Rossi | Italy |
| Continental Corp | James Smith | Australia |
| Pure Foods | Sophia Nguyen | Vietnam |
| Global Supplies | Liam Wilson | UK |
To specify table borders in CSS, use the border property.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<h2>Employee Information</h2>
<table>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Department</th>
</tr>
<tr>
<td>101</td>
<td>John Doe</td>
<td>Marketing</td>
</tr>
<tr>
<td>102</td>
<td>Jane Smith</td>
<td>Finance</td>
</tr>
<tr>
<td>103</td>
<td>Bob Brown</td>
<td>HR</td>
</tr>
<tr>
<td>104</td>
<td>Alice Green</td>
<td>Sales</td>
</tr>
<tr>
<td>105</td>
<td>Charlie Blue</td>
<td>IT</td>
</tr>
</table>
</body>
</html>
| Employee ID | Name | Department |
|---|---|---|
| 101 | John Doe | Marketing |
| 102 | Jane Smith | Finance |
| 103 | Bob Brown | HR |
| 104 | Alice Green | Sales |
| 105 | Charlie Blue | IT |
The table above might seem small in some cases. If you need a table that should span the entire screen (full-width), add width: 100% to the <table> element:
<!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>John Doe</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
| Firstname | Lastname |
|---|---|
| John Doe | Griffin |
| Lois | Griffin |