CSS Table Style
CSS is all about presentation. Discover how CSS Table Style works to transform plain HTML into a premium user experience in the guide below.
The CSS table styles increase the readability of the table information and add appeal to the otherwise plain and unattractive HTML tables. An HTML table can be styled in a variety of ways. The table borders, row-column heights and widths, font colors, and many more movements, including hover effects, are some of them.
To appropriately organize the data into rows and columns or even a more complicated structure, a table in CSS is used to apply the different stylistic characteristics to the HTML Table components. Tables are frequently used in data analysis, research, and communication. To display the layout of the table, use the CSS table-layout attribute. This attribute controls the algorithm used to arrange the cells, rows, and columns of a table.
What does CSS's Table Style Mean?
Let's explore a simple HTML table that exclusively includes data, without any CSS formatting.
As observed, it is evident that the alignment of the columns requires improvement; the absence of borders makes it challenging to distinguish the column boundaries, resulting in readability issues. When accessing a website, users expect a more visually organized layout.
Let's now implement a few CSS table styles and observe the outcome.
How do We Style a Table in CSS?
We must initially create a simple HTML table and understand the different HTML elements associated with an HTML table before proceeding to style tables using CSS.
<html>
<body>
<table>
<table border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Country</th>
</tr>
<tr>
<td>Abdul</td>
<td>David</td>
<td>India</td>
</tr>
<tr>
<td>Sam</td>
<td>Jagan</td>
<td>America</td>
</tr>
</table>
</body>
</html>
Output
A basic HTML table without any CSS formatting is presented in the result:
HTML Table Tags
- <tr>: It denotes rows
- <td>: It is used to produce data cells
- <th>: It is used to add table headers
- <caption>: It is used for captioning the table
- <thead>: It adds a unique header to the table
- <tbody>: It displays the table's main body
- <tfoot>: It makes a unique footer only for the table.
Understanding the significance of each component in a table enables us to enhance its appearance, customize it to our liking, and improve its readability.
Most often, there is no need to include extra class or id attributes while styling tables with CSS. Instead, CSS properties are directly applied to the HTML elements to define the layout. However, in certain cases where specific customization like coloring a single cell or adding a unique effect to a particular cell is required, a class or an ID may be necessary.
Properties in CSS
- Border
It is utilized to specify table boundaries.
A CSS element's border can be customized using the border property. This property serves as a convenient shorthand for specifying the border-width, border-style, and border-color attributes. These individual properties can be utilized to set or retrieve the desired border characteristics.
Syntax:
border = "width style color|initial|inherit"
The default value for it is set to "Initial."
Property Values
- width: This number specifies the border's weight or breadth.
- Style: This value indicates the border's style, such as whether it will be solid, dashed, or dotted.
- Colour: This value describes the border's colour.
The CSS border attribute is illustrated in the following code snippet:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: left;
}
h1 {
color: red;
}
table,
th,
td {
/* Styling the border. */
border: 2px solid black;
}
</style>
</head>
<body>
<h1>Example for border property in CSS</h1>
<h2>Adding border to the table</h2>
<table>
<tr>
<th>Name</th>
<th>Roll.No</th>
</tr>
<tr>
<td>Bindu</td>
<td>123</td>
</tr>
<tr>
<td>Abdul</td>
<td>456</td>
</tr>
</table>
</body>
</html>
Output
Border Collapse
The border-collapse property determines whether the style of each cell should be maintained or if the browser should handle the appearance of adjacent borders that are in contact with each other.
Syntax:
border-collapse: separate|collapse|initial|inherit;
Default Setting: It comes with the default setting of "separate."
Property Values
- Separate: This attribute is used to define a cell's distinct boundary.
- Collapse: Utilized to form a shared boundary by collapsing neighbouring cells.
- Initial: The border-collapse property's default value is set using an initial.
- Inherit: When the border-collapse attribute inherits from its parent elements, it is utilized.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: left;
}
h1 {
color: red;
}
table.one {
/* Styling border-collapse for table one. */
border-collapse: collapse;
}
table.two {
/* Styling border separate for table two. */
border-collapse: separate;
}
table,
td,
th {
border: 2px solid black;
}
</style>
</head>
<body>
<h1>Example for border-collapse</h1>
<h2>borders collapsed example</h2>
<table class="one">
<tr>
<th>Name</th>
<th>Roll.No</th>
</tr>
<tr>
<td>ABC</td>
<td>123</td>
</tr>
<tr>
<td>DEF</td>
<td>456</td>
</tr>
</table>
<br>
<br>
<h2>borders separated example</h2>
<table class="two">
<tr>
<th>Name</th>
<th>Roll.No</th>
</tr>
<tr>
<td>ABC</td>
<td>123</td>
</tr>
<tr>
<td>DEF</td>
<td>456</td>
</tr>
</table>
</body>
</html>
Output
Border Spacing
This value indicates the amount of space between the borders of neighboring cells.
The border-spacing attribute determines the space between the borders of neighboring cells within tables. It is effective only when the border-collapse attribute is configured as no-collapse separate.
Default Value
Syntax
border-spacing: length|initial|inherit;
Property values:
- Length-length: It is used to provide the distance between adjacent cell boundaries. Negative values are not permitted. If two numbers are specified, the first specifies the horizontal gap, and the second the vertical spacing. If just one number is specified, it determines both the horizontal and vertical space between cell boundaries.
- Initial: This function returns the property to its default value.
- If two numbers are specified, the first specifies the horizontal gap, and the second the vertical spacing.
- If just one number is specified, it determines both the horizontal and vertical space between cell boundaries.
Syntax
border-spacing:initial;
<!DOCTYPE html>
<html>
<head>
<title>Example for border-spacing property</title>
<style>
table,
th,
td {
border: 2px solid black;
text-align: center;
}
#geeks {
border-collapse: separate;
background-color: none;
border-spacing: initial;
}
h1 {
color: red;
}
</style>
</head>
<body>
<center>
<h1>Example for border-spacing property</h1>
<h2>border-spacing Property</h2>
<table style="width:70%" id="geeks">
<tr>
<th>Name</th>
<th>Roll.No</th>
<th>Course</th>
</tr>
<tr>
<td>Abdul</td>
<td>123</td>
<td>CSE</td>
</tr>
<tr>
<td>Abdul</td>
<td>456</td>
<td>ECE</td>
</tr>
<tr>
<td>Abdul</td>
<td>788</td>
<td>IT</td>
</tr>
</table>
</center>
</body>
</html>
Output
Caption Side
The caption-side attribute is utilized to determine the placement of the caption within the table structure. Captions are automatically inserted above the table content.
This parameter specifies the position of the table caption within HTML tables. It is applicable to any element with the display property set to caption-side.
Syntax
caption-side: top|bottom|block-start|block-end|inline-start|inline-end|initial|inherit;
Properties:
- Top: This indicates that the table caption should appear at the top of the table. It is the default setting.
- Bottom: The table caption is positioned at the bottom of the table according to this attribute.
- Initial: This function sets the property to its default value.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: left;
}
h1 {
color: red;
}
table.one {
border-collapse: separate;
border-spacing: 8px;
/* Setting caption on top */
caption-side: top;
}
table.two {
border-collapse: separate;
border-spacing: 8px;
/* Setting caption on bottom */
caption-side: bottom;
}
table,
td,
th {
border: 2px solid black;
}
</style>
</head>
<body>
<h1>Example for caption side property</h1>
<h2>Caption on top:</h2>
<table class="one">
<caption>Caption is set as the top of the table.</caption>
<tr>
<th>Name</th>
<th>Roll.No</th>
</tr>
<tr>
<td>ABC</td>
<td>123</td>
</tr>
<tr>
<td>DEF</td>
<td>456</td>
</tr>
</table>
<br>
<br>
<h2>Caption at bottom:</h2>
<table class="two">
<caption> Caption is set as the bottom of the table </caption>
<tr>
<th>Name</th>
<th>Roll.No</th>
</tr>
<tr>
<td>ABC</td>
<td>123</td>
</tr>
<tr>
<td>DEF</td>
<td>456</td>
</tr>
</table>
</body>
</html>
Output
Empty cells
This attribute controls the visibility of borders and backgrounds for empty cells within a table. It defines whether or not to render borders within empty cells of a table.
Syntax
empty-cells: show|hide|initial|inherit;
Default Value: show
Property values
- Show property: This attribute is used to show the boundaries of empty cells.
- Hide property: The hide property is used to conceal the border of an empty cell in a table.
- Initial property: The default property is set using this property.
- Inherit property: The inherit property is used to inherit a property from its parent.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: left;
}
h1 {
color: red;
}
table.one {
border-collapse: separate;
border-spacing: 8px;
/* Hiding empty cells border */
empty-cells: hide;
}
table.two {
border-collapse: separate;
border-spacing: 8px;
/* Displaying empty cells border */
empty-cells: show;
}
table,
td,
th {
border: 2px solid black;
}
</style>
</head>
<body>
<h1>Example for empty cells</h1>
<h2>empty cells hide:</h2>
<table class="one">
<tr>
<th>Name</th>
<th>Roll.No</th>
</tr>
<tr>
<td>ABC</td>
<td></td>
</tr>
<tr>
<td>DEF</td>
<td>456</td>
</tr>
</table>
<br>
<br>
<h2>empty cells show:</h2>
<table class="two">
<tr>
<th>Name</th>
<th>Roll.No</th>
</tr>
<tr>
<td>ABC</td>
<td></td>
</tr>
<tr>
<td>DEF</td>
<td>456</td>
</tr>
</table>
</body>
</html>
Output
