CSS Table
<!DOCTYPE html>
<html>
<head>
<title>Styled HTML Table</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>My Styled Table</h1>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</table>
</body>
</html>
Code Output
CSS Table
CSS can be used to style and customize HTML tables, including table structure, cell formatting, borders, spacing, and more.
-
table
: Applies styles to the table element.th
: Styles the table header cells.td
: Styles the table data cells.border-collapse
: Specifies how table borders should be diborder-spacing
: Sets the spacing between table cells when border-collapse is set to “separate”.text-align
: Aligns the content horizontally within table cells.vertical-align
: Aligns the content vertically within table cellsbackground-color
: Sets the background color of table cells.border
: Defines the border properties for table cells, such as border-width, border-color, and border-style.padding
: Sets the padding of table cells.width
: Specifies the width of table cells or the table itself.