Tables: <td> MCQs Quiz | Class 10

Understanding HTML <td> Tag: A Deep Dive

The <td> tag, short for “table data,” is a fundamental element in HTML used to define a standard data cell within an HTML table. It plays a crucial role in structuring tabular data, allowing you to organize information into rows and columns effectively. Every piece of data you want to display in a table, apart from the headers, goes inside a <td> tag.

Key Characteristics and Usage:

• Purpose: To contain data within an HTML table.
• Parent Element: A <td> element must always be placed inside a <tr> (table row) element.
• Siblings: It can be a sibling to other <td> elements or <th> (table header) elements within the same <tr>.
• Content: Can contain almost any HTML content, including text, images, links, lists, other tables, etc.

Essential Attributes of <td>:

The <td> tag comes with several attributes that allow for flexible structuring and presentation of table data:

• colspan: This attribute specifies the number of columns a data cell should span. It’s useful when a cell needs to stretch across multiple columns horizontally. For example, <td colspan="2"> will make the cell span two columns.
• rowspan: This attribute specifies the number of rows a data cell should span. It’s used when a cell needs to stretch across multiple rows vertically. For example, <td rowspan="3"> will make the cell span three rows.
• headers: (Less common in modern HTML, but good to know) Specifies one or more header cells to which the current <td> element is related. The value must be a space-separated list of id attributes of <th> elements.

Relationship with Other Table Tags:

The <td> tag is part of a larger family of HTML table tags that work together to create structured data displays:

• <table>: The root element that defines the entire table.
• <tr>: Defines a table row, acting as a container for <th> and <td> elements.
• <th>: Defines a table header cell. Unlike <td>, content in <th> is typically bold and centered by default, semantically indicating a header for a column or row.
• <caption>: Provides a title or description for the table.
• <thead>, <tbody>, <tfoot>: Used to group header content, body content, and footer content, respectively, for better structure and accessibility.

Styling <td> with CSS:

While some older HTML attributes for styling (like align, valign, bgcolor) exist for <td>, it’s best practice to use CSS for presentation. Common CSS properties applied to <td> include:

• text-align: Controls horizontal alignment (e.g., left, center, right).
• vertical-align: Controls vertical alignment (e.g., top, middle, bottom).
• padding: Adds space between the cell’s content and its border.
• border: Defines the cell’s border.
• background-color: Sets the background color of the cell.

Example Table with <td>, colspan, and rowspan:

Here’s a simple HTML table structure demonstrating the use of <td> along with colspan and rowspan:

<table style="width:100%; border-collapse: collapse;" border="1">
  <tr>
    <th>Item</th>
    <th>Description</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>High performance</td>
    <td rowspan="2">2</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>Wireless</td>
  </tr>
  <tr>
    <td colspan="2">Total Items</td>
    <td>3</td>
  </tr>
</table>

Quick Revision Points:

• <td> is for table data, <th> for table headers.
• Always nested inside <tr>.
• colspan merges cells horizontally, rowspan merges cells vertically.
• Use CSS for styling <td> for better maintainability and control.
• Tables are primarily for tabular data, not page layout.

Additional Practice Questions:

1. Which of the following attributes is NOT valid for the <td> tag?
   1. rowspan
   2. colspan
   3. width
   4. src
2. What is the default horizontal alignment for content inside a <td> tag in most browsers?
   1. Center
   2. Left
   3. Right
   4. Justify
3. If you want a <td> cell to span across 3 rows and 2 columns, how would you write its attributes?
   1. <td rows="3" cols="2">
   2. <td rowspan="3" colspan="2">
   3. <td span-rows="3" span-cols="2">
   4. <td row="3" col="2">
4. Which HTML tag is used to create a table footer?
   1. <tf>
   2. <tfoot>
   3. <footer>
   4. <tdfoot>
5. What CSS property can you use to add space inside a <td> cell between its content and its border?
   1. margin
   2. border-spacing
   3. padding
   4. line-height