How do I Create a Custom Table in HTML?

To create a custom table in HTML, you use the <table> element and its related tags. Here's a breakdown:

1. Basic Structure

<table>: The main element that defines the table.
<tr>: The <tr> element defines a table row.
<th>: The <th> element defines a table header cell.
<td>: The <td> element defines a table data cell.

2. Example

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Jane Doe</td>
    <td>25</td>
    <td>London</td>
  </tr>
</table>

This code will create a simple table with three columns (Name, Age, City) and two rows of data.

3. Additional Attributes

You can customize tables further using attributes:

border: Sets the border width of the table.
cellspacing: Sets the space between cells.
cellpadding: Sets the space between cell content and the cell border.
width: Sets the table width.
height: Sets the table height.
align: Aligns the table horizontally.
valign: Aligns the table vertically.

4. Styling with CSS

You can use CSS to style your table and give it a custom look. For example:

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

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

This CSS code styles the table to have collapsed borders, a width of 100%, and adds borders, padding, and text alignment to the header and data cells.

5. Advanced Techniques

colspan: Merges cells horizontally.
rowspan: Merges cells vertically.
<thead>, <tbody>, <tfoot>: Structures the table into header, body, and footer sections.

By combining these elements and attributes, you can create complex and visually appealing tables in your HTML pages.

A2oz