CSS Tables
CSS tables allow you to style HTML tables, which display data in rows and columns. With CSS, you can control the appearance of tables by adjusting borders, spacing, alignment, and other properties to make them more visually appealing and easier to read.
Key CSS Table Properties:
1. border
The border property adds borders to the table, rows, cells, or any other table elements (<table>, <tr>, <th>, <td>).
Example:
Output:
In this example:
table, th, td:
• This rule applies to the <table> element and all <th> (table header) and <td> (table data) elements within the table.
• border: 2px solid black;: Adds a 2-pixel solid black border around the table, as well as around each table header and table data cell.
2. border-collapse
The border-collapse property controls whether table borders are separated or collapsed into a single border.
Values:
• separate: Borders are separate, with space between them.
• collapse: Borders are merged into a single border.
Example:
<head>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 2px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
Output:
Border Collapse Property with Collapse Value
Border Collapse Property with Collapse Value
In this example:
• table { border-collapse: collapse; }: This CSS property makes the borders of adjacent cells in the table collapse into a single border. Without this property, each cell would have its separate border, and there would be a small space between the borders of adjacent cells. By collapsing the borders, the table has a cleaner and more compact appearance.
• table { border-collapse: separate; }: This CSS property ensures that the borders of adjacent cells in the table are not collapsed into a single border. Instead, each cell retains its own distinct border, resulting in visible spaces or “gaps” between the borders of adjacent cells.
• The default behavior of a table is border-collapse: separate, but this rule explicitly sets it in case it is changed.
3. padding
The padding property adds space inside the cells, between the cell content and its border.
Example:
<head>
<style>
th, td {
border: 2px solid black;
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
Output:
In this example:
• border: 2px solid black;: This property gives both the table headers (<th>) and the table data cells (<td>) a solid black border that is 2 pixels thick. This creates clear boundaries between the cells, making the table more visually structured.
• padding: 15px;: This property adds 15 pixels of space (padding) inside each table header and data cell. This padding ensures that the content within each cell does not touch the borders, giving the text some breathing room and improving readability.
4. text-align
The text-align property aligns the text horizontally within a table cell.
Values:
• left: Aligns text to the left (default for td).
• center: Centers the text.
• right: Aligns text to the right.
Example:
<head>
<style>
th, td {
border: 2px solid black;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
Output:
In this example:
text-align: center;: This property centers the text horizontally within each table header and data cell. This alignment makes the table content more visually balanced, especially when the table has a uniform appearance.
5. vertical-align
The vertical-align property aligns the content vertically within a table cell.
Values:
• top: Aligns content to the top of the cell.
• middle: Centers content vertically.
• bottom: Aligns content to the bottom of the cell.
Example:
<head>
<style>
th, td {
border: 2px solid black;
height: 100px;
vertical-align: middle;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
Output:
In this example:
• height: 100px;: This sets the height of each table cell to 100 pixels. This property ensures that each cell has a fixed height, which can help in maintaining a consistent layout, especially if the content of the cells varies in size.
• vertical-align: middle;: This property vertically aligns the content of each cell to the middle of the cell. This is particularly useful when cells have a fixed height and you want the content to be centered vertically within the cell.
6. border-spacing
The border-spacing property sets the space between the borders of adjacent cells when border-collapse is set to separate.
Example:
<head>
<style>
table {
border-spacing: 15px;
}
th, td {
border: 2px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
Output:
In this example:
border-spacing: 15px;: This property sets the space between the borders of adjacent cells in the table. The 15-pixel spacing separates the cells, creating a gap between them. This is different from border-collapse: collapse;, which removes the spacing between cells and merges borders.
7. width
The width property sets the width of the table or individual columns.
Example:
<head>
<style>
table {
width: 50%;
}
th, td {
border: 2px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
Output:
In this example:
table { width: 50%; }: This property sets the width of the table to 50% of its containing element (typically the width of the browser window or the parent element). This makes the table occupy half of the available width, providing a responsive layout that adjusts based on the size of the container.
8. table-layout
The table-layout property controls the table’s layout algorithm. It can be set to auto or fixed.
• auto: The column width is determined by the content inside it.
• fixed: The column width is based on the width of the table and columns, regardless of the content.
Example:
<head>
<style>
table {
table-layout: fixed;
width: 300px;
}
th, td {
border: 2px solid black;
width: 100px;
word-wrap: break-word;
}
</style>
</head>
<body>
<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>Long Data Text</td>
</tr>
</table>
</body>
Output:
Fixed Value
Auto Value
In this example:
• table-layout: fixed;: This property sets the table layout to fixed, which means the table width and column widths are determined by the width properties of the columns or the table itself. The table will not adjust its width based on the content; instead, it will use the fixed sizes defined in CSS.
• table-layout: auto;: This property allows the table’s columns to adjust their widths based on the content of the cells. The browser calculates the column widths automatically to fit the content. This can result in varying column widths based on the content.
• word-wrap: break-word;: This property allows long words or strings to break and wrap onto the next line if they exceed the width of their container. This prevents horizontal scrolling and keeps the table content visible within its allocated space.
9. background-color
The background-color property sets the background color of the table, rows, or cells.
Example:
<head>
<style>
th, td {
border: 2px solid black;
background-color: lightblue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
</body>
Output:
In this example:
background-color: lightblue;: This property sets the background color of each cell to light blue. This provides a consistent background color for all header and data cells, making the table visually appealing.
Example of a Styled Table:
<head>
<style>
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid black; padding: 8px; text-align: left; }
th { background-color: lightgray;}
td { background-color: white;}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</table>
</body>
Output:
In this example:
table { width: 100%; border-collapse: collapse; }:
• width: 100%;: This sets the table to occupy the full width of its container, making it responsive to the width of the viewport or parent element.
• border-collapse: collapse;: This property collapses the borders between table cells, merging them into a single border. This creates a cleaner, more unified look.
th, td { border: 1px solid black; padding: 8px; text-align: left; }:
• border: 1px solid black;: This applies a 1-pixel solid black border around each table header (<th>) and table data (<td>) cell.
• padding: 8px;: This adds 8 pixels of padding inside each cell, creating space between the cell’s content and its border.
• text-align: left;: This aligns the text within each cell to the left, providing a consistent alignment across the table.
th { background-color: lightgray; }: This sets the background color of the header cells to light gray, making them distinct from the data cells and highlighting the column titles.
td { background-color: white; }: This sets the background color of the data cells to white, providing a clear contrast with the header cells and making the table content easy to read.
Conclusion
CSS tables allow you to style HTML tables to be more readable and visually appealing. You can control your tables’ layout, spacing, alignment, and color using the various CSS properties.
Course Video
YouTube Reference :
1) CSS Tables in Hindi/Urdu
Practice Scenarios
Scenario 1: Basic Table Styling
Objective: Style a simple table with borders, padding, and a different color for the header.
Expected Output: A table with a header row in a different color, borders around cells, and padding inside cells.
Output:
Scenario 2: Hoverable Table Rows
Objective: Create a table where rows change background color when hovered.
Expected Output: A table where each row changes color on hover.
Output:
Scenario 3: Striped Table
Objective: Style a table with alternating row colors (striped pattern).
Expected Output: A table with alternating row colors for better readability.
Output:
Scenario 4: Responsive Table
Objective: Create a table that adapts well to different screen sizes, especially mobile.
Expected Output: A table that is scrollable on smaller screens.
Output:
Scenario 5: Table with Colspan and Rowspan
Objective: Create a table that uses colspan and rowspan to merge cells.
Expected Output: A table with merged cells to create a more complex structure.
Output:
