CSS
Topperworld.in
Table
• 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;
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;
Border Spacing: This property specifies the space between the borders of
the adjacent cells.
Syntax:
©Topperworld
CSS
border-spacing: value;
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;
Empty cells: This property specifies whether or not to display borders and
background on empty cells in a table.
Syntax:
empty-cells:show/hide;
Table layout: The table layout property is used to set up the layout
algorithm used for the table.
Syntax:
table-layout:auto/fixed;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: left;
}
h1 {
color: green;
©Topperworld
CSS
}
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>Topper World</h1>
<h2>auto table layout:</h2>
©Topperworld
CSS
<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>
©Topperworld
CSS
<td>2</td>
<td>X_Y_Z</td>
</tr>
</table>
</body>
</html>
Output:
©Topperworld
