How To Design Table With HTML and CSS

In this article you will learn how to design a table using HTML and CSS.

A table consists of rows and cells. Each row is represented by the 'tr' element, and each cell is represented by the 'td' element. For example:

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

Add a caption to the table using the 'caption' element. This element should be placed immediately after the opening 'table' tag

<table>
  <caption>Table Caption</caption>

</table>

Add headings to the table using the 'th' element. This element should be used in place of the 'td' element for cells that contain headings.

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

Style the table using CSS. You can use the table, th, and td selectors to style the various parts of the table. For example:

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 8px;
}

th {
  background-color: lightgray;
  font-weight: bold;
}