HTML Table Borders

 In HTML, you can add borders to a table using the border attribute on the <table> tag or with CSS for more control. Here's how you can do it:

Using the border Attribute (HTML):

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

This will create a table with a 1-pixel border around each cell.

Using CSS (Recommended for More Control):

You can use the border property in CSS to style the table and its elements more precisely.

<style>
  table {
    width: 100%;
    border-collapse: collapse; /* This ensures borders between cells merge */
  }
  th, td {
    border: 1px solid black; /* Add borders to table headers and data cells */
    padding: 8px;
    text-align: left;
  }
</style>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

Explanation:

• border-collapse: collapse; ensures that adjacent cell borders merge into a single line.
• border: 1px solid black; adds a solid border of 1 pixel thickness around each <th> and <td>.
• padding: 8px; adds spacing inside the table cells for better readability.

You can modify the border styles (e.g., dotted, dashed, double) and widths to suit your design needs.