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><tableclass="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><tableclass="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-spacingbetween adjacent cells. */border-spacing: 10px;}table.two {border-collapse: separate;/* Styling the border-spacingbetween adjacent cells. */border-spacing: 10px 30px;}table,td,th {border: 1.5px solid blue;}</style></head><body><h1>GeeksforGeeks</h1><h2>border spacing:</h2><tableclass="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><tableclass="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><tableclass="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><tableclass="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><tableclass="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><tableclass="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><tableclass="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><tableclass="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
