Table Attributes in HTML

Table attributes control layout, spacing, and merging of cells. They make tables more readable and organized.

Border Attribute

The border attribute adds a visible border around the table and its cells.

Value specifies border thickness in pixels.

Example:

<table border="3">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>$800</td>
  </tr>
</table>

Output :

• border="3" → Creates a 3-pixel border around the table.

Cell Spacing & Padding

cellspacing

• Defines space between table cells.

• Adds gaps between borders of adjacent cells.

Example: 

<table border="1" cellspacing="10">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

Output :

• cellspacing="10" → 10 pixels of space between cells.

cellpadding

• Defines space inside each cell, i.e., between the cell border and its content.

Example:

<table border="1" cellpadding="10">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

Output :

• cellpadding="10" → 10 pixels of padding inside each cell.

Span Across Cells

a) colspan – Merge Columns

• colspan allows a cell to span multiple columns.

Example:

<table border="1">
  <tr>
    <th>Item</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>Brand: Dell</td>
    <td>Price: $800</td>
  </tr>
</table>

Output : 

The header cell "Details" spans 2 columns.

b) rowspan – Merge Rows

• rowspan allows a cell to span multiple rows.

Example: 

<table border="1">
  <tr>
    <th>Item</th>
    <th>Brand</th>
    <th>Price</th>
  </tr>
  <tr>
    <td rowspan="2">Laptop</td>
    <td>Dell</td>
    <td>$800</td>
  </tr>
  <tr>
    <td>HP</td>
    <td>$750</td>
  </tr>
</table>

Output :

The "Laptop" cell spans 2 rows in the first column.

Complete Example – Table Attributes Combined

<table border="2" cellspacing="5" cellpadding="10">
  <tr>
    <th>Item</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <td rowspan="2">Laptop</td>
    <td>Brand: Dell</td>
    <td>Price: $800</td>
  </tr>
  <tr>
    <td>Brand: HP</td>
    <td>Price: $750</td>
  </tr>
</table>

Output :

HTML Table Attributes - Flowchart