A table in CSS is used to apply the various styling properties to the HTML Table elements to arrange the data in rows and columns, or possibly in a more complex structure in a properly organized manner. Tables are widely used in communication, research, and data analysis. The table-layout property in CSS can be utilized to display the layout of the table. This property is basically used to sets the algorithm that is used to layout <table>cells, rows, and columns.
Properties:
Border: It is used for specifying borders in the table.
Syntax:
border: table_width table_color;
Example 1: This example describes the CSS Table to apply the border property.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
body {
text-align: left;
}
h1 {
color: green;
}
table,
th,
td {
/* Styling the border. */
border: 1.5px solid blue;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h2 >Add border to table:</ h2 >
< table >
< tr >
< th >Roll No.</ th >
< th >Name</ th >
</ tr >
< tr >
< td >1</ td >
< td >A_B_C</ td >
</ tr >
< tr >
< td >2</ td >
< td >X_Y_Z</ td >
</ tr >
</ table >
</ body >
</ html >
|
Output:

Border Collapse: The border-collapse property tells us whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.
Syntax:
border-collapse: collapse/separate;
Example 2: This example describes the CSS Table by applying the border-collapse property.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
body {
text-align: left;
}
h1 {
color: green;
}
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: 1.5px solid blue;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h2 >borders collapsed:</ h2 >
< table class = "one" >
< tr >
< th >Roll Number</ th >
< th >Name</ th >
</ tr >
< tr >
< td >1</ td >
< td >A_B_C</ td >
</ tr >
< tr >
< td >2</ td >
< td >X_Y_Z</ td >
</ tr >
</ table >
< br >
< br >
< h2 >borders separated:</ h2 >
< table class = "two" >
< tr >
< th >Roll Number</ th >
< th >Name</ th >
</ tr >
< tr >
< td >1</ td >
< td >A_B_C</ td >
</ tr >
< tr >
< td >2</ td >
< td >X_Y_Z</ td >
</ tr >
</ table >
</ body >
</ html >
|
Output:

Border Spacing: This property specifies the space between the borders of the adjacent cells.
Syntax:
border-spacing: value;
Example 3: This example describes the CSS Table by applying the border-spacing property.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
body {
text-align: left;
}
h1 {
color: green;
}
table.one {
border-collapse: separate;
/* Styling the border-spacing
between adjacent cells. */
border-spacing: 10px;
}
table.two {
border-collapse: separate;
/* Styling the border-spacing
between adjacent cells. */
border-spacing: 10px 30px;
}
table,
td,
th {
border: 1.5px solid blue;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h2 >border spacing:</ h2 >
< table class = "one" >
< tr >
< th >Roll Number</ th >
< th >Name</ th >
</ tr >
< tr >
< td >1</ td >
< td >A_B_C</ td >
</ tr >
< tr >
< td >2</ td >
< td >X_Y_Z</ td >
</ tr >
</ table >
< br >
< br >
< h2 >border spacing:</ h2 >
< table class = "two" >
< tr >
< th >Roll Number</ th >
< th >Name</ th >
</ tr >
< tr >
< td >1</ td >
< td >A_B_C</ td >
</ tr >
< tr >
< td >2</ td >
< td >X_Y_Z</ td >
</ tr >
</ table >
</ body >
</ html >
|
Output:

Caption Side: Caption side property is used for controlling the placement of caption in the table. By default, captions are placed above the table.
Syntax:
caption-side: top/bottom;
Example 4: This example describes the CSS Table by applying the caption-side property to control the placement of the Table caption.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
body {
text-align: left;
}
h1 {
color: green;
}
table.one {
border-collapse: separate;
border-spacing: 10px;
/* Controlling the placement of caption. */
caption-side: top;
}
table.two {
border-collapse: separate;
border-spacing: 10px;
/* Controlling the placement of caption. */
caption-side: bottom;
}
table,
td,
th {
border: 1.5px solid blue;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h2 >Caption on top:</ h2 >
< table class = "one" >
< caption >Caption at the top of the table.</ caption >
< tr >
< th >Roll Number</ th >
< th >Name</ th >
</ tr >
< tr >
< td >1</ td >
< td >A_B_C</ td >
</ tr >
< tr >
< td >2</ td >
< td >X_Y_Z</ td >
</ tr >
</ table >
< br >
< br >
< h2 >Caption at bottom:</ h2 >
< table class = "two" >
< caption > Caption at the bottom of the table </ caption >
< tr >
< th >Roll Number</ th >
< th >Name</ th >
</ tr >
< tr >
< td >1</ td >
< td >A_B_C</ td >
</ tr >
< tr >
< td >2</ td >
< td >X_Y_Z</ td >
</ tr >
</ table >
</ body >
</ html >
|
Output:

Empty cells: This property specifies whether or not to display borders and background on empty cells in a table.
Syntax:
empty-cells:show/hide;
Example 5: This example describes the CSS Table by applying the empty-cell property that specifies whether to display the borders or not in the empty cells in a table.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
body {
text-align: left;
}
h1 {
color: green;
}
table.one {
border-collapse: separate;
border-spacing: 10px;
/* Hiding empty cells border */
empty-cells: hide;
}
table.two {
border-collapse: separate;
border-spacing: 10px;
/* Display empty cells border */
empty-cells: show;
}
table,
td,
th {
border: 1.5px solid blue;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h2 >empty cells hide:</ h2 >
< table class = "one" >
< tr >
< th >Roll Number</ th >
< th >Name</ th >
</ tr >
< tr >
< td >1</ td >
< td ></ td >
</ tr >
< tr >
< td >2</ td >
< td >X_Y_Z</ td >
</ tr >
</ table >
< br >
< br >
< h2 >empty cells show:</ h2 >
< table class = "two" >
< tr >
< th >Roll Number</ th >
< th >Name</ th >
</ tr >
< tr >
< td >1</ td >
< td ></ td >
</ tr >
< tr >
< td >2</ td >
< td >X_Y_Z</ td >
</ tr >
</ table >
</ body >
</ html >
|
Output:

Table layout: The table layout property is used to set up the layout algorithm used for the table.
Syntax:
table-layout:auto/fixed;
Example 6: This example describes the CSS Table by applying the table layout property.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
body {
text-align: left;
}
h1 {
color: green;
}
table.one {
width: 80px border-collapse: separate;
border-spacing: 10px;
/* Layout of table is auto. */
table-layout: auto;
}
table.two {
width: 80px border-collapse: separate;
border-spacing: 10px;
/* Layout of table is fixed. */
table-layout: fixed;
}
table,
td,
th {
border: 1.5px solid blue;
width: 80px;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h2 >auto table layout:</ h2 >
< table class = "one" >
< tr >
< th >Roll Number</ th >
< th >Name</ th >
</ tr >
< tr >
< td >1</ td >
< td >A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P</ td >
</ tr >
< tr >
< td >2</ td >
< td >X_Y_Z</ td >
</ tr >
</ table >
< br >
< br >
< h2 >fixed table layout:</ h2 >
< table class = "two" >
< tr >
< th >Roll Number</ th >
< th >Name</ th >
</ tr >
< tr >
< td >1</ td >
< td >A_B_C_D_E_F_G_H_I_J_K_L_M_N_O_P</ td >
</ tr >
< tr >
< td >2</ td >
< td >X_Y_Z</ td >
</ tr >
</ table >
</ body >
</ html >
|
Output:

Supported Browsers: The browsers supported by Tables
- Google Chrome
- Edge
- Mozilla Firefox
- Opera
- Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
29 Oct, 2021
Like Article
Save Article