CSS Tables

In CSS, tables can be created and styled using a combination of thetable,tr,td, and other related HTML elements. Here are the basic steps to create a simple table using HTML and CSS:

1. Create a basic HTML table structure using thetable,tr, andtdelements.

<table>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
</table>

2. Apply CSS styles to the table and its elements using thetable,tr, andtdselectors.

table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #ddd;
  font-weight: bold;
}

In this example, we’re using theborder-collapseproperty to collapse the borders of the table cells, thewidthproperty to set the table width to100%, and theborder,padding, andtext-alignproperties to style the individual table cells. We’re also using thethelement to create a header row with a different background color and bold text.

Here are some additional tips for styling tables in CSS:

• Use theborder-spacingproperty to add spacing between table cells.
• Use thecaptionelement to add a table caption.
• Use thethead,tbody, andtfootelements to group table rows and apply styles to specific parts of the table.
• Use thecolgroupandcolelements to apply styles to specific columns of the table.