CSS Tables

In this chapter, we will learn how to style HTML tables using CSS. Tables are used to display data in a structured format, and CSS provides various properties to control their appearance. We will cover:

• Basic Table Styling
• Table Borders
• Table Padding and Spacing
• Table Alignment
• Table Width and Height
• Table Colors and Backgrounds
• Zebra Striped Tables
• Responsive Tables
• Examples of Table Styling

Basic Table Styling

HTML tables are composed of <table>, <tr>, <th>, and <td> elements. CSS can be used to style these elements to improve their appearance and readability.

Example

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

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

HTML

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
</table>

Table Borders

The border property sets the border for table elements. The border-collapse property specifies whether the table borders should be collapsed into a single border or separated as in standard HTML.

Example with Collapsed Borders

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

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

Example with Separate Borders

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px;
}

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

Table Padding and Spacing

The padding property adds space inside table cells, while the border-spacing property adds space between table cells when using separate borders.

Example

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px;
}

th, td {
  border: 1px solid black;
  padding: 15px;
  text-align: left;
}

Table Alignment

The text-align property sets the horizontal alignment of the content in table cells, while the vertical-align property sets the vertical alignment.

Example

th {
  text-align: center;
  vertical-align: middle;
}

td {
  text-align: left;
  vertical-align: top;
}

Table Width and Height

The width and height properties set the size of table elements. You can specify the width of the entire table or individual columns.

Example

table {
  width: 100%;
}

th, td {
  width: 33%;
  height: 50px;
}

Table Colors and Backgrounds

The color and background-color properties set the text color and background color of table elements.

Example

th {
  background-color: #333;
  color: white;
}

td {
  background-color: #f0f0f0;
  color: #333;
}

Zebra Striped Tables

Zebra striping improves readability by alternating row colors.

Example

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

tr:nth-child(odd) {
  background-color: #ffffff;
}

Responsive Tables

Responsive tables adapt to different screen sizes using CSS media queries.

Example

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  th, td {
    width: 100%;
    box-sizing: border-box;
  }

  th {
    background-color: #333;
    color: white;
  }
}

Examples of Table Styling

Example 1: Basic Styled Table

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

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

th {
  background-color: #333;
  color: white;
}

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

HTML

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
</table>

Example 2: Responsive Table

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  th, td {
    width: 100%;
    box-sizing: border-box;
  }

  th {
    background-color: #333;
    color: white;
  }
}

HTML

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

Conclusion

In this chapter, you learned how to style HTML tables using CSS, including basic styling, borders, padding and spacing, alignment, width and height, colors and backgrounds, zebra striping, and responsive tables. These techniques will help you create visually appealing and functional tables for your web pages.