Tables in CSS have several properties that control their layout, appearance, and behavior.
These properties allow you to style HTML tables, making them visually appealing and better suited to your needs.
table-layout
Description: This property defines the algorithm used to lay out table cells, rows, and columns.
Values:
auto: Default. The table's width is determined by the content, and the columns' width is adjusted accordingly.fixed: The table's width is determined by the width of the table itself (if specified), or by the widths of the first row’s cells. The content is not considered in setting the column widths.
<style> table { table-layout: fixed; width: 100%; } td { overflow: hidden; text-overflow: ellipsis; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> </tr> </table>
makes sure that the table takes up 100% of the width, and the column widths are fixed, regardless of content size.
border-collapse
Description: This property controls whether the table borders are collapsed into a single border or separated.
Values:
collapse: Borders between table cells are collapsed into a single border.separate: Borders are separated, with space between them.
<style> table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid black; padding: 8px; text-align: left; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> </tr> </table>
the borders between the table cells are collapsed into a single border.
border-spacing
Description: When border-collapse is set to separate, this property defines the space between the borders of adjacent cells.
Values: Length values like 10px, 1em, etc. Can be one value (for both horizontal and vertical spacing) or two values (first for horizontal, second for vertical).
<style> table { border-collapse: separate; border-spacing: 10px; } td, th { border: 1px solid black; padding: 8px; text-align: left; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> </tr> </table>
adds a 10-pixel space between the borders of the cells.
caption-side
Description: This property specifies the placement of a table's caption.
Values:
top: The caption is placed above the table (default).bottom: The caption is placed below the table.
<style> table { caption-side: bottom; border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; } </style> <table> <caption>Table Caption: This caption is at the bottom</caption> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> </tr> </table>
the caption of the table is placed below it.
empty-cells
Description: This property specifies whether or not to display borders and background on empty cells in a table.
Values:
show: Borders and background are drawn for empty cells.hide: Borders and background are not drawn for empty cells.
<style> table { empty-cells: hide; border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td></td> </tr> <tr> <td>Row 2, Cell 1</td> <td></td> <td>Row 2, Cell 3</td> </tr> </table>
empty cells in the table won't display borders or backgrounds.
vertical-align
Description: This property affects the vertical positioning of content within a table cell.
Values: This property affects the vertical positioning of content within a table cell.
top: Aligns the content at the top of the cell.middle: Aligns the content in the middle of the cell.bottom: Aligns the content at the bottom of the cell.baseline: Aligns the content along the baseline of the cell.
<style> table { width: 100%; border-collapse: collapse; } td { height: 100px; border: 1px solid #ddd; vertical-align: middle; text-align: center; } </style> <table> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table>
Here, the content in each cell is vertically centered.
text-align
Description: This property sets the horizontal alignment of text in a table cell.
Values:
left: Aligns the text to the left.center: Centers the text.right: Aligns the text to the right.
<style> table { border-collapse: separate; border-spacing: 10px; } td, th { border: 1px solid black; padding: 8px; } td { text-align: center; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> </tr> </table>
all text in the table cells is centered horizontally.
padding
Description: This property sets the padding inside the table cells.
Values: Length values like 10px, 1em, etc.
<style> table { border-collapse: separate; border-spacing: 10px; } td, th { border: 1px solid black; } td { padding: 15px; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> </tr> </table>
adds 15 pixels of padding inside each table cell.
width and height
Description: These properties set the width and height of table cells, columns, or the entire table.
Values: Length values like 100px, percentages, etc.
<style> table { width: 80%; border-collapse: separate; border-spacing: 10px; } td, th { border: 1px solid black; padding: 8px; } td { height: 50px; text-align: center; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> </tr> </table>
sets the table width to 80% of its container, and each cell's height to 50 pixels.
background-color
Description: This property sets the background color of the table, rows, or individual cells.
Values: Color values like red, #f00, rgb(255, 0, 0), etc.
<style> table { width: 80%; border-collapse: separate; border-spacing: 10px; } td, th { border: 1px solid black; padding: 8px; } td { height: 50px; text-align: center; background-color: lightblue; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> <td>Row 1, Cell 3</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> <td>Row 2, Cell 3</td> </tr> </table>
all table cells have a light blue background.