CSS | Tables
CSS is used to style the HTML tables.
Properties:
- Border: It is used for specifying borders in the table.
Syntax:border: table_width table_color;
Example-1:
<!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:
<!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:
<!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:
<!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:
<!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:
<!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