Creating and Customizing Tables with HTML and CSS
Tables are an essential part of web development, especially when it comes to displaying structured data. However, plain HTML tables can look quite basic and unappealing. With a little bit of CSS, you can transform your tables into visually appealing and easy-to-read components of your web pages. In this blog post, we’ll walk through creating a table with HTML and customizing it with CSS to make it stand out.
Are you looking for Live Training in C#?
The upcoming batch for C#.NET is sceduled.
Book Your Seat Now.
Step 1: Creating a Basic HTML Table
First, let’s create a simple HTML table to display some data. We’ll use a table to display information about a few products, including their names, categories, prices, and availability.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Product Table</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Product List</h1>
<table>
<thead>
<tr>
<th>Product Name</th>
<th>Category</th>
<th>Price</th>
<th>Availability</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product 1</td>
<td>Category A</td>
<td>$10.00</td>
<td>In Stock</td>
</tr>
<tr>
<td>Product 2</td>
<td>Category B</td>
<td>$20.00</td>
<td>Out of Stock</td>
</tr>
<tr>
<td>Product 3</td>
<td>Category A</td>
<td>$15.00</td>
<td>In Stock</td>
</tr>
</tbody>
</table>
</body>
</html>
This code sets up a basic table with headers and rows of data. Now, let’s move on to styling it with CSS.
Run the html file, you will get the OUT PUT as mentioned below.
Step 2: Adding Basic CSS Styles
To start, we’ll add some basic styles to make the table more visually appealing. We’ll apply styles to the table, headers, rows, and cells.
Basic CSS Styles:
/* styles.css */
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
text-align: center;
color: #333;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th,
td {
border: 1px solid #ccc;
padding: 10px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>With these styles, we have:
- A more readable font for the body.
- Centered and colored the header.
- Full-width table with collapsed borders.
- Padding for table cells.
- Background color for table headers.
- Alternating row colors for better readability.
Are you looking for Live Training in C#?
The upcoming batch for C#.NET is sceduled.
Book Your Seat Now.
After the CSS changes, Re-run the html file and you will get the OUT PUT as mentioned below.
Step 3: Adding Advanced Customizations
To make the table even more attractive, we’ll add some advanced styles like hover effects, custom fonts, and subtle animations.
Advanced CSS Styles:
/* styles.css */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f0f0;
margin: 20px;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th, td {
border: 1px solid #ccc;
padding: 15px;
text-align: left;
transition: background-color 0.3s ease;
}
th {
background-color: #4CAF50;
color: white;
text-transform: uppercase;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f1f1f1;
}
td {
position: relative;
}
td::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.2);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
td:hover::after {
opacity: 1;
}
After the advanced CSS changes, Re-run the html file and you will get result as below with some hover effects.
These styles add:
- A different, more modern font for the body.
- A light gray background for the page.
- A box shadow for the table to give it a lifted look.
- More padding for table cells for better spacing.
- Uppercase text and custom color for headers.
- Hover effects for rows and cells to enhance interactivity.
- Subtle animations for cell hover effects.
Conclusion
By combining HTML and CSS, you can create tables that are not only functional but also visually appealing. Customizing tables with CSS allows you to present data in a way that is easy to read and engaging for users. Experiment with different styles and animations to make your tables stand out on your web pages.
Are you looking for Live Training in C#?
The upcoming batch for C#.NET is sceduled.
Book Your Seat Now.