CSS Table Style

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 examine a straightforward HTML table that only contains data, i.e., without any CSS style.

As we can also see, the columns need to be better aligned; there are no borders to indicate the boundaries of the columns, and they are difficult to read. We want to see something else when we visit a website.

Let's now apply a small amount of CSS table styles and see the result.

How do We Style a Table in CSS?

We first need to develop a basic HTML table and comprehend what the various HTML components connected to an HTML table signify before we go on to decorating tables using CSS.

<html>
   <body>
    <table>
      <table border="1">
  <tr>
   <th>First Name</th>
   <th>Last Name</th>
   <th>Country</th>
  </tr>
  <tr>
  <td>John</td>
  <td>David</td>
  <td>India</td>
  </tr>
  <tr>
   <td>Sam</td>
   <td>Jagan</td>
   <td>America</td>
  </tr>
</table>
 
   </body>
</html>

Output

A very simple HTML table without any CSS styling is displayed in the output:

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.

Knowing what each of the many table parts means allows us to add our style, make them more aesthetically pleasing, and make them easier to read.

The majority of the time, we don't add any additional class or id when using CSS to layout tables. Instead, we use the CSS properties to apply the style to the HTML element directly. We may need to offer a class or an ID if we need to provide some custom styles, such as colouring only one cell or applying a special effect to a specific cell.

Properties in CSS

1. Border

It is utilized to specify table boundaries.

A CSS element's border can be styled using the border attribute. As a shorthand notation for these three characteristics, this property combines the three others border-width, border-style, and border-color. The border-width, border-style, and border-color Properties are set or returned.

Syntax:

Default Value: Initial is the default value for it.

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 property is demonstrated in the code below:

<!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>Priya</td>
<td>456</td>
</tr>
</table>
</body>
</html>

Output

Border Collapse

The border-collapse attribute indicates whether each cell's style should be preserved or if the browser should manage how neighbouring borders that touch one another look.

Syntax:

Default Value: It has the default value 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 describes how much space is available between adjacent cells' borders.

The border-spacing property specifies the distance between the borders of adjacent cells in the tables. This property is only active when the border-collapse property is set to no-collapse separate.

Default Value

2px

Syntax

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.

Syntax

<!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>John</td>
<td>123</td>
<td>CSE</td>
</tr>
<tr>
<td>Priya</td>
<td>456</td>
<td>ECE</td>
</tr>
<tr>
<td>Ravi</td>
<td>788</td>
<td>IT</td>
</tr>
</table>
</center>
</body>

</html> 

Output

Caption Side

The caption side attribute is used to specify where the caption appears in the table. Captions are automatically added above the table.

This parameter is used to indicate the location of the table caption. It's found in HTML tables. This property can be applied to any element whose display property is 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 property determines whether or not empty cells in a table should have borders and backgrounds. This property specifies whether or not to display the borders in empty cells in a table.

Syntax

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