CSS Table Properties
Contents
CSS Table Properties
learn CSS border-collapse , CSS border-spacing, CSS caption-side, CSS table-layout CSS text-align and CSS vertical-align.
CSS (Cascading Style Sheets) provides several properties that can be used to style tables.
Here are some commonly used CSS table properties:
CSS Table border-collapse:
Specifies whether the table cells share borders or have separate borders. Possible values are:
- collapse: Borders are collapsed into a single border (default).
- separate: Each cell has its own borders.
CSS table border-spacing:
Specifies the distance between the borders of adjacent cells when border-collapse is set to separate. It can be defined using a single value for equal spacing on all sides or separate values for horizontal and vertical spacing.
CSS Table caption-side:
Specifies the placement of the table caption. Possible values are:
- top: Caption is placed above the table.
- bottom: Caption is placed below the table (default).
empty-cells: Specifies how to handle empty cells.
Possible values are:
- show: Empty cells are displayed with borders.
- hide: Empty cells are not displayed (borders are collapsed).
- inherit: Inherits the empty-cells value from the parent element.
CSS table-layout:
Specifies the algorithm used to calculate the width of table columns.
Possible values are:
- auto: The browser automatically calculates the column widths based on content (default).
- fixed: The table and column widths are set by the widths of table and col elements or by the CSS width property.
- width: Specifies the width of the table.
It can be defined using a fixed value (e.g., pixels) or relative values (e.g., percentage).
CSS Table text-align:
Specifies the horizontal alignment of the text within table cells.
Possible values are:
- left: Aligns the text to the left.
- right: Aligns the text to the right.
- center: Centers the text.
- justify: Aligns the text to both the left and right edges of the cell.
CSS vertical-align:
Specifies the vertical alignment of the content within table cells. Possible values are:
- top: Aligns the content to the top.
- middle: Vertically centers the content.
- bottom: Aligns the content to the bottom.
- baseline: Aligns the content to the baseline of the first line of text.
These are just a few of the many CSS properties available for styling tables. By using these properties in combination with others, you can customize the appearance of tables to suit your design needs.
How to use CSS Table border-collapse property in CSS and HTML?
Here’s a complete example of using the border-collapse property in HTML with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Explanation:
1-In this example, we define a CSS style block within the <style> tags in the <head> section of the HTML document.
2-The table selector sets the border-collapse property to collapse, which means the table cells will share borders.
3-The th and td selectors define the style for table header cells and regular cells, respectively.
4-In this case, we set a black solid border with a width of 1 pixel and add some padding to the cells for spacing.
5-Inside the <body> section, we create a <table> element with three rows (<tr>) and two columns (<th> for header cells and <td> for regular cells).
You can modify the content of the cells as needed.
When you open this HTML file in a web browser, you will see a table with collapsed borders around the cells.
How to use CSS Table border-spacing property ?
Here’s an example of using the border-spacing property in HTML with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
border-spacing: 10px;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Explanation:
1-In this example, we use the border-spacing property along with border-collapse: separate to specify the distance between the borders of adjacent cells.
2-The CSS style block within the <style> tags in the <head> section sets the border-spacing property to 10px, which means there will be a 10-pixel spacing between the borders of adjacent cells.
3-The th and td selectors define the style for table header cells and regular cells, respectively.
4-Here, we set a black solid border with a width of 1 pixel and add some padding to the cells for spacing.
5-Inside the <body> section, we create a <table> element with three rows (<tr>) and two columns (<th> for header cells and <td> for regular cells).
You can modify the content of the cells as needed.
When you open this HTML file in a web browser, you will see a table with separated borders and a spacing of 10 pixels between the cells. Adjust the value of border-spacing to change the amount of spacing between the cells.
How to use the CSS Table caption-side property ?
Here’s an example of using the caption-side property in HTML with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table {
caption-side: bottom;
}
caption {
caption-side: top;
text-align: center;
font-weight: bold;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<caption>Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Explanation:
1-In this example, we use the caption-side property to specify the placement of the table caption.
2-The CSS style block within the <style> tags in the <head> section sets the caption-side property for the table element to bottom, which means the caption will be placed below the table.
3-We also define a separate style for the caption element. Here, we set the caption-side property to top, which ensures that the caption is placed at the top of the table. Additionally, we center-align the caption text and make it bold for emphasis.
4-The th and td selectors define the style for table header cells and regular cells, respectively. We set a black solid border with a width of 1 pixel and add some padding to the cells for spacing.
5-Inside the <body> section, we create a <table> element with a <caption> element. The caption text is specified between the opening and closing <caption> tags.
6-Below the caption, we have three rows (<tr>) and two columns (<th> for header cells and <td> for regular cells).
You can modify the content of the cells and the caption as needed.
When you open this HTML file in a web browser, you will see a table with the caption placed at the top and the table below it. Adjust the value of caption-side to top or bottom to change the placement of the caption.
How to use CSS empty-cells property in HTML with CSS ?
Here’s an example of using the empty-cells property in HTML with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table {
empty-cells: hide;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td></td>
</tr>
<tr>
<td></td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Explanation:
1-In this example, we use the empty-cells property to specify how empty cells should be handled.
2-The CSS style block within the <style> tags in the <head> section sets the empty-cells property for the table element to hide.
3-This means that empty cells will not be displayed, and the borders are collapsed when there is no content in the cell.
4-The th and td selectors define the style for table header cells and regular cells, respectively.
5-We set a black solid border with a width of 1 pixel and add some padding to the cells for spacing.
6-Inside the <body> section, we create a <table> element with three rows (<tr>) and two columns (<th> for header cells and <td> for regular cells).
7-In the second and third rows, we intentionally leave one cell empty to demonstrate the effect of the empty-cells property.
When you open this HTML file in a web browser, you will see a table where empty cells are not displayed.
The borders collapse when there is no content in the cell. Modify the value of empty-cells to show or inherit to change how empty cells are
How to use CSS table-layout property in HTML with CSS?
Here’s an example of using the table-layout property in HTML with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table {
table-layout: fixed;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Explanation:
1-In this example, we use the table-layout property to specify the algorithm used to calculate the width of table columns.
2-The CSS style block within the <style> tags in the <head> section sets the table-layout property for the table element to fixed.
3-This means that the table and column widths will be set explicitly either by the widths of table and col elements or by the CSS width property.
4-We also set the width property of the table to 100% to make it span the entire width of its container.
5-The th and td selectors define the style for table header cells and regular cells, respectively.
6-We set a black solid border with a width of 1 pixel and add some padding to the cells for spacing.
7-Inside the <body> section, we create a <table> element with three rows (<tr>) and two columns (<th> for header cells and <td> for regular cells).
You can modify the content of the cells as needed.
When you open this HTML file in a web browser, you will see a table with fixed layout, where the width of the columns is determined by the explicit widths set on the table or the CSS width property.
Adjust the values of table-layout and width to change the behavior of the table layout.
How to use CSS table width property in HTML with CSS ?
Certainly! Here’s an example of using the width property in HTML with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Explanation:
1-In this example, we use the width property to specify the width of the table.
2-The CSS style block within the <style> tags in the <head> section sets the width property of the table element to 100%. This means that the table will span the entire width of its container.
3-The th and td selectors define the style for table header cells and regular cells, respectively.
4-We set a black solid border with a width of 1 pixel and add some padding to the cells for spacing.
5-Inside the <body> section, we create a <table> element with three rows (<tr>) and two columns (<th> for header cells and <td> for regular cells).
You can modify the content of the cells as needed.
When you open this HTML file in a web browser, you will see a table that spans the entire width of its container. Adjust the value of the width property to set a specific width for the table, such as a percentage or fixed value (e.g., width: 500px;).
How to use CSS text-align property in HTML with CSS ?
Here’s an example of using the text-align property in HTML with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
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>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Explanation:
1-In this example, we use the text-align property to specify the horizontal alignment of the text within table cells.
2-The CSS style block within the <style> tags in the <head> section sets the text-align property for the th and td elements to center. This means that the text within these cells will be centered horizontally.
3-The th and td selectors define the style for table header cells and regular cells, respectively.
4-We set a black solid border with a width of 1 pixel and add some padding to the cells for spacing.
5-Inside the <body> section, we create a <table> element with three rows (<tr>) and two columns (<th> for header cells and <td> for regular cells).
You can modify the content of the cells as needed.
When you open this HTML file in a web browser, you will see a table with text centered within the cells. Adjust the value of the text-align property to left, right, or justify to change the horizontal alignment of the text.
How to use the vertical-align property in HTML with CSS ?
Certainly! Here’s an example of using the vertical-align property in HTML with
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
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>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Explanation:
1-In this example, we use the vertical-align property to specify the vertical alignment of the content within table cells.
2-The CSS style block within the <style> tags in the <head> section sets the vertical-align property for the th and td elements to middle. This means that the content within these cells will be vertically aligned in the middle.
3-The th and td selectors define the style for table header cells and regular cells, respectively.
4-We set a black solid border with a width of 1 pixel and add some padding to the cells for spacing.
5-Inside the <body> section, we create a <table> element with three rows (<tr>) and two columns (<th> for header cells and <td> for regular cells). You can modify the content of the cells as needed.
When you open this HTML file in a web browser, you will see a table with content vertically aligned in the middle of the cells. Adjust the value of the vertical-align property to top, bottom, or baseline to change the vertical alignment of the content.
How to use the border property in HTML with CSS ?
Here’s an example of using the border property in HTML with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 3px solid red;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Explanation:
1-In this example, we use the border property to specify the border style of table cells.
2-The CSS style block within the <style> tags in the <head> section sets the border-collapse property for the table element to collapse. This means that the borders of adjacent cells will be collapsed into a single border.
3-The th and td selectors define the style for table header cells and regular cells, respectively.
4-We set the border property to 3px solid red, which means a red solid border with a width of 3 pixel will be applied to the cells.
5-We also add some padding to the cells for spacing.
6-Inside the <body> section, we create a <table> element with three rows (<tr>) and two columns (<th> for header cells and <td> for regular cells).
You can modify the content of the cells as needed.
When you open this HTML file in a web browser, you will see a table with cells bordered by a black solid line. Adjust the values in the border property to customize the style of the border, such as changing the color or border width.
How to use the CSS caption-side property in HTML with CSS?
Certainly! Here’s an example of using the caption-side property in HTML with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
caption {
caption-side: bottom;
text-align: center;
font-weight: bold;
padding: 8px;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<caption>Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Explanation:
1-In this example, we use the caption-side property to specify the placement of the table caption.
2-The CSS style block within the <style> tags in the <head> section sets the caption-side property for the caption element to bottom. This means that the caption will be placed below the table.
3-We also define styles for the caption element, including text-align: center to center-align the caption text, font-weight: bold to make the caption text bold, and padding: 8px to add some padding around the caption.
4-The table selector sets the width property to 100% and the border-collapse property to collapse, ensuring the table occupies the full width of its container and that the borders of adjacent cells are collapsed.
5-The th and td selectors define the style for table header cells and regular cells, respectively.
6-We set a black solid border with a width of 1 pixel and add some padding to the cells for spacing.
7-Inside the <body> section, we create a <table> element with a <caption> element.
8-The caption text is specified between the opening and closing <caption> tags. Below the caption, we have three rows (<tr>) and two columns (<th> for header cells and <td> for regular cells).
You can modify the content of the cells and the caption as needed.
When you open this HTML file in a web browser, you will see a table with the caption placed below the table. Adjust the value of caption-side to top to place the caption above the table.
How to use the border-spacing property in HTML with CSS?
Here’s an example of using the border-spacing property in HTML with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
border-spacing: 10px;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Explanation:
1-In this example, we use the border-spacing property to specify the distance between the borders of adjacent cells.
2-The CSS style block within the <style> tags in the <head> section sets the border-collapse property for the table element to separate, which means the table cells will have separate borders.
3-The border-spacing property is then set to 10px, which sets the distance between the borders of adjacent cells to 10 pixels.
4-The th and td selectors define the style for table header cells and regular cells, respectively.
5-We set a black solid border with a width of 1 pixel and add some padding to the cells for spacing.
6-Inside the <body> section, we create a <table> element with three rows (<tr>) and two columns (<th> for header cells and <td> for regular cells).
You can modify the content of the cells as needed.
When you open this HTML file in a web browser, you will see a table with separated borders between the cells, and a spacing of 10 pixels between the borders of adjacent cells. Adjust the value of border-spacing to change the amount of spacing between the cells.
How to use the border-collapse property in HTML with CSS ?
Here’s an example of using the border-collapse property in HTML with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
</body>
</html>
Explanation:
1-In this example, we use the border-collapse property to specify whether the table cells share borders or have separate borders.
2-The CSS style block within the <style> tags in the <head> section sets the border-collapse property for the table element to collapse, which means the borders of adjacent cells will be collapsed into a single border.
3-The th and td selectors define the style for table header cells and regular cells, respectively. We set a black solid border with a width of 1 pixel and add some padding to the cells for spacing.
4-Inside the <body> section, we create a <table> element with three rows (<tr>) and two columns (<th> for header cells and <td> for regular cells). You can modify the content of the cells as needed.
When you open this HTML file in a web browser, you will see a table with collapsed borders, where the borders of adjacent cells merge into a single border line. Adjust the value of border-collapse to separate to have separate borders for each cell.
Application: simple table to display student grades
Here’s a simple application of the CSS table properties we discussed:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
caption {
caption-side: bottom;
text-align: center;
font-weight: bold;
padding: 8px;
}
</style>
</head>
<body>
<table>
<caption>Student Grades</caption>
<tr>
<th>Student Name</th>
<th>Math</th>
<th>Science</th>
<th>English</th>
</tr>
<tr>
<td>John Doe</td>
<td>85</td>
<td>92</td>
<td>78</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>90</td>
<td>88</td>
<td>95</td>
</tr>
<tr>
<td>Mark Johnson</td>
<td>80</td>
<td>85</td>
<td>92</td>
</tr>
</table>
</body>
</html>
Explanation:
1-In this example, we create a simple table to display student grades.
Here’s a breakdown of the CSS properties used:
- border-collapse: collapse; sets the table to have collapsed borders.
- width: 100%; makes the table span the entire width of its container.
- border: 1px solid black; sets a solid black border with a width of 1 pixel for table cells.
- padding: 8px; adds some padding around the content within the cells.
- text-align: center; centers the text within the cells horizontally.
- caption-side: bottom; places the caption below the table.
- font-weight: bold; makes the caption text bold.
2-Inside the <table> element, we have a <caption> element that displays “Student Grades” as the table caption. Below that, we have a header row (<tr>) with table header cells (<th>) for the column names.
3-The subsequent rows (<tr>) contain student names and their corresponding grades in math, science, and English.
When you open this HTML file in a web browser, you will see a table with the student grades displayed. The table has collapsed borders, centered text, and a caption at the bottom. You can modify the content of the cells or add more rows as needed.
Quiz with answers
Here’s a multiple-choice quiz to test your knowledge about CSS table properties:
1-Which CSS property is used to specify whether the table cells share borders or have separate borders?
a) border-spacing
b) border-collapse
c) table-layout
2-Which CSS property is used to set the distance between the borders of adjacent cells?
a) border-spacing
b) border-collapse
c) empty-cells
3-Which CSS property is used to specify the placement of the table caption?
a) caption-side
b) table-layout
c) empty-cells
4-Which CSS property is used to handle empty cells in a table?
a) empty-cells
b) caption-side
c) table-layout
5-Which CSS property is used to set the algorithm used to calculate the width of table columns?
a) table-layout
b) border-collapse
c) caption-side
6-Choose the correct option for each question (by selecting a, b, or c).
Here are the answers:
- b) border-collapse
- a) border-spacing
- a) caption-side
- a) empty-cells
- a) table-layout
7-Which CSS property is used to specify the width of a table?
a) table-width
b) width
c) table-layout
8-Which CSS property is used to specify the horizontal alignment of text within table cells?
a) text-align
b) vertical-align
c) caption-side
9-Which CSS property is used to specify the vertical alignment of content within table cells?
a) vertical-align
b) text-align
c) caption-side
10-Which CSS property is used to control the visibility of borders around empty cells?
a) empty-cells
b) border-collapse
c) border-spacing
11-Which CSS property is used to control the placement of the table caption?
- a) caption-side
- b) table-layout
- c) border-spacing
Here are the answers to the additional questions:
- b) width
- a) text-align
- a) vertical-align
- a) empty-cells
- a) caption-side
12-Which CSS property is used to set the placement of the table caption to be above the table?
a) caption-side
b) table-layout
c) text-align
13-Which CSS property is used to set the algorithm used to calculate the width of table columns based on the content?
a) table-layout
b) border-collapse
c) border-spacing
14-Which CSS property is used to hide the borders of adjacent cells and collapse them into a single border?
a) border-spacing
b) border-collapse
c) empty-cells
15-Which CSS property is used to handle empty cells by hiding them?
a) empty-cells
b) border-spacing
c) border-collapse
16-Which CSS property is used to set the distance between the borders of adjacent cells when border-collapse is set to separate?
a) border-spacing
b) border-collapse
c) table-layout
Here are the answers to the additional questions:
- a) caption-side
- a) table-layout
- b) border-collapse
- a) empty-cells
- a) border-spacing
17-Which CSS property is used to set the horizontal alignment of the content within table cells to be at the left side?
a) text-align
b) vertical-align
c) caption-side
18-Which CSS property is used to set the vertical alignment of the content within table cells to be at the bottom?
a) vertical-align
b) text-align
c) caption-side
19-Which CSS property is used to specify the placement of the table caption to be at the top of the table?
a) caption-side
b) table-layout
c) empty-cells
20-Which CSS property is used to specify the spacing between the border of a cell and its content?
a) padding
b) margin
c) border-spacing
21-Which CSS property is used to set the thickness and style of the border around table cells?
a) border
b) border-collapse
c) border-spacing
Here are the answers to the additional questions:
- a) text-align
- a) vertical-align
- a) caption-side
- a) padding
- a) border
22-Which CSS property is used to control the visibility of table borders around empty cells?
a) empty-cells
b) border-collapse
c) border-spacing
23-Which CSS property is used to specify the distance between the borders of adjacent cells when border-collapse is set to collapse?
a) border-spacing
b) border-collapse
c) table-layout
24-Which CSS property is used to set the algorithm used to calculate the width of table columns based on the content and available space?
a) table-layout
b) border-collapse
c) caption-side
25-Which CSS property is used to specify the placement of the table caption to be on the left side?
a) caption-side
b) table-layout
c) text-align
26-Which CSS property is used to set the alignment of the content within table cells to be at the top?
a) vertical-align
b) text-align
c) caption-side
Here are the answers to the additional questions:
- a) empty-cells
- b) border-collapse
- a) table-layout
- c) text-align
- a) vertical-align