Lists and Table— Tables

10. Tables

• Creating Tables (<table>)
• Basic table structure and tags
• Table Rows, Headers, and Cells (<tr>, <th>, <td>)
• Adding rows, headers, and data cells
• Table Attributes (border, colspan, rowspan)
• Adding borders and merging cells

Creating Tables (<table>)

Basic Table Structure and Tags

Tables in HTML are created using the <table> element, which organizes data into rows and columns. The basic structure of a table consists of the following elements:

1. <table>: This is the container element that holds the entire table structure.
2. <tr> (Table Row): Defines a row within the table.
3. <th> (Table Header): Defines a header cell within the table. Header cells typically contain the titles or labels for columns.
4. <td> (Table Data): Defines a standard data cell within the table.

Example of Basic Table Structure:

<table>
  <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>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
</table>

Explanation:

• The <table> tag wraps around the entire table.
• The first <tr> tag contains <th> elements, which are used to define the table headers.
• Subsequent <tr> tags contain <td> elements, which are used to define the table’s data cells.

---

Table Rows, Headers, and Cells (<tr>, <th>, <td>)

Adding Rows, Headers, and Data Cells

The rows of a table are defined using the <tr> tag. Inside each row, you can place either header cells (<th>) or data cells (<td>).

1. <tr> (Table Row): Each <tr> represents a single row in the table. It can contain a combination of <th> and <td> elements, depending on whether the row is a header row or a data row.

2. <th> (Table Header): Cells within a <tr> that are designated as header cells. These cells are often styled differently (bold and centered by default) and represent the column headers.

3. <td> (Table Data): Standard data cells that hold the content of the table. These cells align under the corresponding headers.

Example:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1.00</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>$0.50</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Cherry</td>
    <td>$2.00</td>
    <td>200</td>
  </tr>
</table>

Explanation:

• The first <tr> defines the header row, where each column is labeled with <th> elements (Product, Price, Quantity).
• Each subsequent <tr> represents a row of data with <td> elements. For example, the first row of data lists Apple as the product, $1.00 as the price, and 50 as the quantity.

---

Table Attributes (border, colspan, rowspan)

Adding Borders and Merging Cells

Tables can be customized using various attributes that define how the table and its cells should appear or behave.

1. border Attribute:

• The border attribute is used to add borders around the table and its cells.
• Although it’s more common now to use CSS for styling, the border attribute can be used directly in the HTML for simplicity.

Example:

<table border="1">
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1.00</td>
    <td>50</td>
  </tr>
</table>

Explanation:

• The border="1" attribute creates a border around the table and its cells.

2. colspan Attribute:

• The colspan attribute allows a cell to span across multiple columns.
• This is useful when you want to create a header or footer that stretches across the entire table or a portion of it.

Example:

<table border="1">
  <tr>
    <th colspan="3">Product Information</th>
  </tr>
  <tr>
    <td>Product</td>
    <td>Price</td>
    <td>Quantity</td>
  </tr>
</table>

Explanation:

• The <th colspan="3"> in the first row spans across three columns, creating a single header that reads “Product Information” above the rest of the table.

3. rowspan Attribute:

• The rowspan attribute allows a cell to span across multiple rows.
• This is useful when you want a particular cell to take up space in more than one row.

Example:

<table border="1">
  <tr>
    <th>Product</th>
    <th>Details</th>
  </tr>
  <tr>
    <td rowspan="2">Apple</td>
    <td>Price: $1.00</td>
  </tr>
  <tr>
    <td>Quantity: 50</td>
  </tr>
</table>

Explanation:

• The <td rowspan="2"> in the first column spans across two rows, so “Apple” appears as the product name for both the price and quantity details.

---

This detailed explanation provides a solid foundation for understanding how to create and manipulate tables in HTML, covering basic structure, rows, headers, cells, and essential attributes like border, colspan, and rowspan.