CSS Tables

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.
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  1. 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.
Scroll to Top