Table Styling
What Is It?
CSS makes table cells easier to read by adding borders, space, and background colors.
What the Tags Mean
border: draws a line.padding: adds space inside cells.border-collapse: joins neighboring borders.border-spacing: adds gaps when borders are separate.
Example 1
Save each example as index.html and open it in your browser. Each code block is a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Styling</title>
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid gray; padding: 8px; }
</style>
</head>
<body>
<table>
<tr><th scope="col">Item</th><th scope="col">Price</th></tr>
<tr><td>Pen</td><td>₹10</td></tr>
</table>
</body>
</html>Browser preview
What you see: The table has a visible grid and space around the text.
Example 2: Another Use
This complete example gives the header a light blue background.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Styling</title>
<style>
th { background-color: lightblue; }
</style>
</head>
<body>
<table>
<tr><th scope="col">Item</th><th scope="col">Price</th></tr>
<tr><td>Pen</td><td>₹10</td></tr>
</table>
</body>
</html>Browser preview
Simple Tip
Use CSS instead of old attributes such as cellpadding or bgcolor.
Try It Yourself
Change the cell padding from 8px to 16px.