Styling Tables in HTML and CSS

by jay prakash

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Styled HTML Table</title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>

	<table>
		<thead>
			<tr>
				<th>Header 1</th>
				<th>Header 2</th>
				<th>Header 3</th>
				<th>Header 4</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Data 1</td>
				<td>Data 2</td>
				<td>Data 3</td>
				<td>Data 4</td>
			</tr>
			<tr>
				<td>Data 5</td>
				<td>Data 6</td>
				<td>Data 7</td>
				<td>Data 8</td>
			</tr>
			<tr>
				<td>Data 9</td>
				<td>Data 10</td>
				<td>Data 11</td>
				<td>Data 12</td>
			</tr>
			<tr>
				<td>Data 13</td>
				<td>Data 14</td>
				<td>Data 15</td>
				<td>Data 16</td>
			</tr>
		</tbody>
	</table>

</body>
</html>

CSS

/* Table Styling */
table {
	width: 80%;
	margin: 30px auto;
	border-collapse: collapse;
	text-align: center;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

th {
	background-color: #004C5B;
	color: white;
	padding: 12px;
	font-size: 18px;
}

td {
	padding: 10px;
	border: 1px solid #BCC5C7;
	transition: background-color 0.3s ease;
}

tr:nth-child(even) {
	background-color: #EDF1F1;
}

tr:nth-child(odd) {
	background-color: white;
}

tr:hover {
	background-color: #B4C2C5;
	transition: background-color 0.3s ease-in-out;
}

th, td {
	border: 1px solid #BCC5C7;
}

@media (max-width: 768px) {
	table {
		width: 100%;
	}
	th, td {
		font-size: 14px;
		padding: 8px;
	}
}