Learn with us

HTML Table Borders:
To add borders to your HTML table, you can use CSS to style the table and its elements. Here’s an example:

<style>
  table {
    border-collapse: collapse; /* Collapses the borders of adjacent cells */
    border: 1px solid black; /* Sets a 1px solid black border for the table */
  }

  th, td {
    border: 1px solid black; /* Sets a 1px solid black border for header and data cells */
    padding: 8px; /* Adds 8px of padding inside cells */
  }
</style>

In this example, the border-collapse: collapse; property ensures that adjacent cell borders merge into a single line. The border: 1px solid black; property sets a 1-pixel solid black border for the table, <th>, and <td> elements. The padding: 8px; property adds 8 pixels of padding inside each cell.

HTML Table Headers:
To specify table headers, you can use the <th> element instead of <td>. The <th> element represents a header cell. For example:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

In this example, the <th> elements are used for the table headers, and the <td> elements are used for regular data cells.

HTML Table Padding and Spacing:
To add padding and spacing between cells in a table, you can use CSS properties. Here’s an example:

<style>
  table {
    border-spacing: 10px; /* Adds 10px of spacing between cells */
  }

  th, td {
    padding: 8px; /* Adds 8px of padding inside cells */
  }
</style>

In this example, the border-spacing: 10px; property adds 10 pixels of spacing between cells. The padding: 8px; property adds 8 pixels of padding inside each cell.

HTML Colspan and Rowspan:
The colspan attribute allows a cell to span multiple columns, and the rowspan attribute allows a cell to span multiple rows. Here’s an example:

<table>
  <tr>
    <th>Header 1</th>
    <th colspan="2">Header 2</th>
  </tr>
  <tr>
    <td rowspan="2">Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
  </tr>
</table>

In this example, the second <th> element has colspan="2", indicating that it should span two columns. The first <td> element has rowspan="2", indicating that it should span two rows.

HTML Table Styling:
You can further style your HTML tables using CSS by targeting specific table elements or applying additional properties. Some common styling options include background color, font styles, alignment, and more.

When it comes to styling HTML tables, you have a wide range of options to customize their appearance using CSS (Cascading Style Sheets). Here are some common techniques and CSS properties you can use to style your tables:

1. Table Borders and Cell Padding:

<style>
  table {
    border-collapse: collapse; /* Collapses the borders of adjacent cells */
    border: 1px solid black; /* Sets a 1px solid black border for the table */
    width: 100%; /* Sets the table width to 100% of its container */
  }

  th, td {
    border: 1px solid black; /* Sets a 1px solid black border for header and data cells */
    padding: 8px; /* Adds 8px of padding inside cells */
  }
</style>

This example sets the table borders to collapse, applies a 1-pixel solid black border to the table and cells, and adds 8 pixels of padding inside each cell. Adjust the border thickness, color, and padding value as desired.

2. Table Header Styling:

<style>
  th {
    background-color: #f2f2f2; /* Sets a background color for header cells */
    font-weight: bold; /* Applies bold font weight to header cells */
    text-align: center; /* Centers the text in header cells */
  }
</style>

In this example, the header cells (<th>) have a background color of #f2f2f2, bold font weight, and centered text alignment. You can modify the background color, font weight, and alignment according to your design requirements.

3. Alternate Row Background Colors:

<style>
  tr:nth-child(even) {
    background-color: #f9f9f9; /* Sets a background color for even rows */
  }
</style>

This CSS rule applies a background color to every even row (<tr>) of the table, creating a striped effect. You can change the background color to suit your design.

4. Hover Effect on Rows:

<style>
  tr:hover {
    background-color: #e6e6e6; /* Sets a background color for the hovered row */
  }
</style>

This CSS rule applies a background color to a row when it’s hovered over by the mouse. Adjust the background color as desired.

5. Text Alignment in Cells:

<style>
  td {
    text-align: right; /* Aligns the text in data cells to the right */
  }
</style>

This CSS rule aligns the text in data cells (<td>) to the right. You can use left or center for different alignments.

These are just a few examples of how you can style HTML tables using CSS. You can combine and modify these techniques, as well as explore other CSS properties, to achieve the desired table design and appearance.

HTML Table Colgroup:
The <colgroup> element allows you to define a group of columns in a table and apply common styling or attributes to them. Here’s an example:

<table>
  <colgroup>
    <col style="background-color: yellow;">
    <col span="2">
  </

colgroup>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

In this example, the <colgroup> element is used to define a group of columns. The first <col> has an inline style of background-color: yellow;, which sets the background color for that column. The second <col> has span="2", indicating that it should span two columns.

These are some examples of how you can manipulate and style HTML tables to suit your needs. Using CSS, you can achieve various table designs and layouts by applying different styles and attributes.