CSS Tables – Complete Guide to Styling and Alignment | Tutorial
CSS Tables
Learn how to create and style tables with CSS. This comprehensive tutorial covers table borders, sizing, alignment, and more for effective table design.
CSS (Cascading Style Sheets) tables allow you to control the layout and appearance of HTML tables on your web pages. You can use CSS to define styles for various elements of a table, such as table headers, table cells, borders, backgrounds, and more.
Here’s an example of how you can create a basic CSS table:
HTML:
<table class="my-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>
CSS:
.my-table {
width: 100%;
border-collapse: collapse;
}
.my-table th, .my-table td {
border: 1px solid black;
padding: 8px;
}
.my-table th {
background-color: #f2f2f2;
font-weight: bold;
}
.my-table tr:nth-child(even) {
background-color: #dddddd;
}
In the above example, the table is given a class of “my-table” for styling purposes. The CSS rules for .my-table set the width to 100% of its container and collapse the borders between cells using border-collapse: collapse.
The CSS rules for .my-table th, .my-table td style the table headers (<th>) and table cells (<td>) by adding a solid black border and setting padding to provide some spacing around the content.
The CSS rule for .my-table th sets a background color (#f2f2f2) and makes the text bold for table headers.
The CSS rule for .my-table tr:nth-child(even) sets a background color (#dddddd) for every even row in the table, creating a striped effect.
You can customize the styles further based on your requirements. CSS provides a wide range of properties and values to control the appearance of tables and their elements.
step by step how to create css table
Here’s a step-by-step guide on how to create a CSS table:
Step 1: Set up your HTML structure
Start by setting up the HTML structure of your table. Use the <table>, <tr>, <th>, and <td> tags to create the table, rows, headers, and cells respectively.
For example:
<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>
Step 2: Create a CSS class for the table
Add a class attribute to the <table> element. This class will be used to target the table in your CSS code. For example, let’s use the class name “my-table”:
<table class="my-table">
<!-- table content -->
</table>
Step 3: Define CSS styles for the table
In your CSS code, define styles for the table class you created.
Here's an example of some common table styles you can apply:
.my-table {
width: 100%;
border-collapse: collapse;
}
.my-table th, .my-table td {
border: 1px solid black;
padding: 8px;
}
.my-table th {
background-color: #f2f2f2;
font-weight: bold;
}
.my-table tr:nth-child(even) {
background-color: #dddddd;
}
Step 4: Customize the styles
Feel free to customize the styles according to your preferences. You can change the width, border properties, padding, background colors, fonts, and more to match your design requirements.
Step 5: Link the CSS file
Save the CSS code in a separate file with a “.css” extension (e.g., “styles.css”). Link the CSS file to your HTML document by adding the following line between the <head> tags:
<link rel="stylesheet" href="styles.css">
Make sure to adjust the href attribute value to match the actual file path and name of your CSS file.
That’s it! With these steps, you have created a basic CSS table. You can further enhance and modify the styles to suit your specific needs by exploring additional CSS properties and values.
Table Borders:complete code example
Here’s a complete code example that demonstrates how to create a CSS table with custom borders:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table class="my-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>
CSS (styles.css):
.my-table {
width: 100%;
border-collapse: collapse;
}
.my-table th, .my-table td {
border: 2px solid #000;
padding: 8px;
}
.my-table th {
background-color: #f2f2f2;
font-weight: bold;
}
In this example, the HTML structure is contained within the <body> tags. The CSS file (styles.css) is linked in the <head> section using the <link> tag, which references the external CSS file.
The CSS code defines the styles for the “my-table” class. The table has a width of 100% and the border-collapse property is set to “collapse” to remove any spacing between the table cells.
The border property is applied to both table headers (<th>) and table cells (<td>) to create a solid black border with a thickness of 2 pixels. The padding property adds spacing inside the cells to provide some breathing room for the content.
The background-color property is set for the table headers to give them a light gray background (#f2f2f2), and the font-weight property is used to make the text inside the headers bold.
Save the HTML code in an HTML file (e.g., “index.html”), and the CSS code in a CSS file (e.g., “styles.css”) in the same directory. Then, open the HTML file in a web browser, and you will see the table with custom borders.
Feel free to modify the CSS styles to suit your desired border thickness, color, padding, and other visual properties of the table.
Full-Width Table:complete code example
Certainly! Here’s a complete code example that demonstrates how to create a full-width CSS table:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="table-container">
<table class="my-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>
</div>
</body>
</html>