CSS Table

In CSS, a table is an HTML element used to display tabular data in rows and columns. Tables are typically created using the <table>, <tr> (table row), <th> (table header cell), and <td> (table data cell) elements. You can use CSS to style tables, including changing colors, fonts, borders, spacing, and alignment, to make them visually appealing and fit your overall design.

Here’s a simple example of an HTML table:

HTML:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Occupation</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
    <td>Software Engineer</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>25</td>
    <td>Graphic Designer</td>
  </tr>
</table>

CSS:

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

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

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

In this example, we apply some basic CSS styles to the table and its elements:

1. width: 100%;: The table will take up 100% of its containing element’s width, making it responsive to the container’s size.
2. border-collapse: collapse;: Collapses the borders of adjacent table cells, creating a cleaner appearance.
3. padding: 8px;: Adds padding inside the table cells, making the content look more spaced.
4. border: 1px solid #ccc;: Adds a 1-pixel border with a light gray color around each table cell.
5. text-align: left;: Aligns the text inside the table cells to the left.
6. background-color: #f2f2f2;: Sets a light gray background color for the table header cells (<th>).
7. font-weight: bold;: Makes the text inside the table header cells bold.

You can further customize the table styles by changing colors, fonts, and other CSS properties to match your design requirements. CSS allows for a wide range of styling options, making it possible to create visually attractive and functional tables for displaying tabular data on your web pages.