HTML Tables

What is an HTML table?

An HTML table is a structured way to present data in rows and columns. Tables are created using the <table> element and are commonly used for displaying tabular data such as schedules, lists, or comparisons.

How do you create a basic HTML table?

You can create a basic HTML table using the <table> tag along with <tr> for table rows, <th> for header cells, and <td> for data cells.

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

What is the purpose of the <th> element in a table?

The <th> element defines a header cell in a table, which is typically displayed in bold and centered by default. It helps to identify the content of the columns or rows, improving the table's readability.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>

How do you create a table with a caption in HTML?

You can create a table with a caption by using the <caption> element inside the <table> tag. The caption provides a brief description of the table's content.

<table>
  <caption>Employee Information</caption>
  <tr>
    <th>Name</th>
    <th>Position</th>
  </tr>
</table>

What are the colspan and rowspan attributes in HTML tables?

The colspan attribute allows a cell to span multiple columns, while the rowspan attribute allows a cell to span multiple rows. These attributes help in creating more complex table layouts.

<table>
  <tr>
    <th colspan="2">Header spanning two columns</th>
  </tr>
  <tr>
    <td rowspan="2">Row spanning two rows</td>
    <td>Cell 1</td>
  </tr>
  <tr>
    <td>Cell 2</td>
  </tr>
</table>

How can you style tables using CSS?

You can style tables using CSS by targeting the <table>, <tr>, <th>, and <td> elements. You can set properties such as borders, padding, text alignment, and background colors.

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

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

What is the border-collapse property in CSS?

The border-collapse property is used to control the spacing between table cells. Setting it to collapse merges the borders of adjacent cells into a single border, while separate keeps the borders of each cell distinct.

table {
  border-collapse: collapse; /* Merges cell borders */
}

How do you create a table with alternating row colors?

You can create a table with alternating row colors by using the CSS :nth-child pseudo-class. This allows you to style every other row with a different background color.

tr:nth-child(even) {
  background-color: #f2f2f2; /* Light gray for even rows */
}

What is the <thead>, <tbody>, and <tfoot> in an HTML table?

The <thead>, <tbody>, and <tfoot> elements are used to group sections of a table. <thead> contains the header content, <tbody> contains the body content, and <tfoot> contains the footer content.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total: 55</td>
    </tr>
  </tfoot>
</table>