CSS Tables

CSS (Cascading Style Sheets) provides various properties and techniques to style tables. Tables in HTML are structured using the <table> element and consist of rows (<tr>) and cells (<td> or <th>). Here are some common CSS properties that can be applied to tables:

1. Borders and Background:
   • border: Specifies the border properties of the table.
   • border-collapse: Determines how table borders should be collapsed into a single border.
   • background: Sets the background color or image of the table.
2. Width and Height:
   • width: Sets the width of the table.
   • height: Sets the height of the table.
3. Text Alignment and Styling:
   • text-align: Aligns the text within table cells horizontally.
   • vertical-align: Aligns the content vertically within table cells.
   • font-family: Sets the font family for the table text.
   • font-size: Sets the font size for the table text.
   • font-weight: Specifies the weight (boldness) of the table text.
4. Padding and Margin:
   • padding: Adds space between the content and the cell borders.
   • margin: Adds space around the table.
5. Alternating Row Colors:
   • nth-child: Applies styles to alternate rows using CSS selectors.

Here’s an example of CSS code styling a table:

css

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

This code sets a border-collapse for the table, padding and border properties for table cells (<th> and <td>), a background color for <th> elements, and alternating row colors using the nth-child selector.

You can modify these properties based on your specific requirements to style your tables using CSS.