1. Table Borders (border, border-collapse, border-spacing):

Definition:

Sets the border properties of the table.

Syntax:

table {
border: 1px solid #ddd; /* Border around the table */
border-collapse: collapse; /* Collapse border spacing into a single border */
border-spacing: 0; /* No space between table cells */
}

2. Table Cell Padding and Spacing (padding, cellpadding, cellspacing):

Definition:

Sets padding and spacing for cells in the table.

Syntax:

td, th {
padding: 8px; /* Padding inside each cell */
}

/* Deprecated, but you might still encounter it in older code: */
table {
cellpadding: 8px; /* Padding inside each cell */
cellspacing: 0; /* No space between table cells */
}

3. Table Width and Height (width, height):

Definition:

Sets the width and height of the table.

Syntax:

table {
width: 100%; /* Table takes up 100% of the container width */
height: 300px; /* Fixed height for the table */
}

4. Table Header and Footer Styles (thead, tfoot, th):

Definition:

Styles the table header and footer.

Syntax:

thead, tfoot {
background-color: #f2f2f2; /* Background color for header and footer */
}

th {
font-weight: bold; /* Bold text for header cells */
}

5. Table Row Styles (tr):

Definition:

Styles the table rows.

Syntax:

tr {
background-color: #f9f9f9; /* Background color for alternate rows */
}

6. Table Cell Styles (td):

Definition:

Styles the individual table cells.

Syntax:

td {
border: 1px solid #ddd; /* Border around each cell */
}

7. Text Alignment in Cells (text-align):

Definition:

Sets the horizontal alignment of text within cells.

Syntax:

td, th {
text-align: center; /* Center align text in cells */
}

8. Vertical Alignment in Cells (vertical-align):

Definition:

Sets the vertical alignment of content within cells.

Syntax:

td, th {
vertical-align: middle; /* Align content vertically in the middle */
}

9. Table Caption Styles (caption):

Definition:

Styles the table caption.

Syntax:

caption {
font-size: 1.2em; /* Set the font size for the caption */
color: #333; /* Text color for the caption */
}

 

Now Let’s Create a Table using CSS properties:

Example:

Output: