Tables-in-CSS
Tables in CSS
- Tables in HTML can be styled using CSS to change their appearance and improve their visual presentation.
properties used to design tables in CSS:
Table Borders:
- Used set borders for the entire table or specific table elements (such as rows, cells, or headers) using CSS properties like border, border-collapse, and border-spacing.
table {
border: 1px solid #000; /* Adds a border to the whole table */
border-collapse: collapse;
/* Collapses adjacent borders into a single border */
}
th, td {
border: 1px solid #000;
/* Adds borders to table cells (headers and data cells) */
}
Table Width and Alignment:
- The width and alignment of a table are controlled by using the width and margin property. To center a table on the page, you can use the margin property.
table {
width: 100%; /* Makes the table span the width of its container */
margin: 0 auto; /* Centers the table on the page */
}
Table Cell Padding and Spacing:
- You can set padding and spacing for table cells using the padding and cellspacing attributes.
td {
padding: 10px; /* Adds padding inside each table cell */
}
table {
border-spacing: 10px; /* Adds spacing between table cells */
}
Table Background and Text Color:
- You can change the background and text color of table cells and headers using CSS.
th, td {
background-color: #f0f0f0; /* Sets the background color for table cells and headers */
color: #333; /* Sets the text color for table cells and headers */
}
Table Header Styles:
- You can style table headers differently from regular cells using the th selector.
th {
background-color: #333; /* Background color for header cells */
color: #fff; /* Text color for header cells */
}
CSS Table Border:
th and td tags using the CSS border property.
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
Example:
<!DOCTYPE>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>First_Name</th>
<th>Last_Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>60</td>
</tr>
<tr>
<td>James</td>
<td>William</td>
<td>80</td>
</tr>
<tr>
<td>Swati</td>
<td>Sironi</td>
<td>82</td>
</tr>
<tr>
<td>Chetna</td>
<td>Singh</td>
<td>72</td>
</tr>
</table>
</body>
</html>
Output:
CSS Table Border Collapse:
By using border-collapse property, we can collapse all borders in one border only.
<style>
table,
th,
td {
border: 2px solid black;
border-collapse: collapse;
}
</style>
Example:
<!DOCTYPE>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>First_Name</th>
<th>Last_Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>60</td>
</tr>
<tr>
<td>James</td>
<td>William</td>
<td>80</td>
</tr>
<tr>
<td>Swati</td>
<td>Sironi</td>
<td>82</td>
</tr>
<tr>
<td>Chetna</td>
<td>Singh</td>
<td>72</td>
</tr>
</table>
</body>
</html>
Output: