What is table layout in HTML?

Basic Layout of Table in HTML

Below the basic structure or layout is mentioned of the table in HTML with the syntax example. In HTML, you can create tables by using all mentioned tags such as <table>, <tr>, <td>, and <th> tags.

Basic Syntax Example of HTML Table

<table>

  <tr>

    <th>Header 1</th>

    <th>Header 2</th>

  </tr>

  <tr>

    <td>Cell 1</td>

    <td>Cell 2</td>

  </tr>

</table>

Deep Details of HTML Table By Using CSS

You can control table layout and styling by using CSS properties such as borders, background colors, spacing, and more.

Syntax Example By Using CSS

<style>

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

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

  th { background-color: #000000; }

</style>

• The "border-collapse: collapse;" is used to collapse the borders of adjacent cells into a single border,
• "width: 100%;" is used to sets the table width to 100% of its container.
• "border: 1px solid black;" is used to add a solid black border around each cell
• "padding: 8px;" is used to make some padding inside the cells.
• "background-color: #000000;" is used to sets a light gray background color for the header cells.