Tables: <table> MCQs Quiz | Class 10

Understanding HTML Tables: The <table> Element

HTML tables are fundamental for organizing data on web pages. They allow you to present information in a grid format of rows and columns, making complex datasets easier to read and understand. The core of any HTML table is the <table> element, which acts as a container for all other table-related tags.

Key Table Elements and Their Roles:

• <table>: This is the main container for all table data. All other table elements must be nested inside it.
• <tr> (Table Row): Defines a single row within a table. Each <tr> contains one or more data cells or header cells.
• <th> (Table Header): Defines a header cell in a table. By default, content inside <th> tags is bold and centered. Headers typically describe the content of a column or row.
• <td> (Table Data): Defines a standard data cell in a table. This is where the actual content of your table goes.
• <thead> (Table Head): Groups the header content of a table. It helps browsers and screen readers understand the structure and makes it easier to style the table header separately.
• <tbody> (Table Body): Groups the main content (body) of a table. This is where most of your table data will reside.
• <tfoot> (Table Foot): Groups the footer content of a table. This is often used for summary information, totals, or footnotes.

Attributes for Table Structure and Layout:

• colspan: An attribute that can be used with <th> or <td> elements. It specifies how many columns a cell should span horizontally. For example, <td colspan="2"> would make a cell occupy the space of two columns.
• rowspan: Similar to colspan, this attribute specifies how many rows a cell should span vertically. For example, <th rowspan="3"> would make a header cell occupy the space of three rows.
• caption (<caption> tag): While not an attribute, the <caption> tag provides a title or description for the entire table. It should be the first element after the opening <table> tag.

Example of a Basic HTML Table:

<table style="width:100%; border-collapse: collapse;">
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr>
      <th style="border: 1px solid #ccc; padding: 8px; text-align: left;">Month</th>
      <th style="border: 1px solid #ccc; padding: 8px; text-align: left;">Product A Sales</th>
      <th style="border: 1px solid #ccc; padding: 8px; text-align: left;">Product B Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid #ccc; padding: 8px;">January</td>
      <td style="border: 1px solid #ccc; padding: 8px;">$1200</td>
      <td style="border: 1px solid #ccc; padding: 8px;">$800</td>
    </tr>
    <tr>
      <td style="border: 1px solid #ccc; padding: 8px;">February</td>
      <td style="border: 1px solid #ccc; padding: 8px;">$1500</td>
      <td style="border: 1px solid #ccc; padding: 8px;">$1000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td style="border: 1px solid #ccc; padding: 8px;">Total</td>
      <td style="border: 1px solid #ccc; padding: 8px;">$2700</td>
      <td style="border: 1px solid #ccc; padding: 8px;">$1800</td>
    </tr>
  </tfoot>
</table>

Quick Revision Checklist:

• <table> is the container.
• <tr> for rows.
• <th> for header cells, <td> for data cells.
• <thead>, <tbody>, <tfoot> for semantic grouping.
• colspan for horizontal merging.
• rowspan for vertical merging.
• <caption> for table title.
• Always use CSS for styling tables for better control and separation of concerns.

Practice Questions:

1. Which HTML element is used to provide a descriptive title for a table?

   • A) <heading>
   • B) <title>
   • C) <caption>
   • D) <label>
   • Correct Answer: C) <caption>

2. By default, the content within a <th> tag is usually:

   • A) Left-aligned and italicized
   • B) Right-aligned and bold
   • C) Centered and bold
   • D) Underlined and left-aligned
   • Correct Answer: C) Centered and bold

3. If you want a table cell to span across 3 rows, which attribute and value would you use?

   • A) rows=”3″
   • B) colspan=”3″
   • C) rowspan=”3″
   • D) cellspan=”3″
   • Correct Answer: C) rowspan=”3″

4. What is the primary benefit of using <thead>, <tbody>, and <tfoot> tags?

   • A) They automatically add borders to the table.
   • B) They are required for all HTML tables to render correctly.
   • C) They provide semantic structure, accessibility, and styling flexibility.
   • D) They change the font size of the text within the table.
   • Correct Answer: C) They provide semantic structure, accessibility, and styling flexibility.

5. Which CSS property is commonly used to remove the default spacing between table cells and make borders connect?

   • A) border-spacing
   • B) cell-collapse
   • C) border-collapse
   • D) padding-collapse
   • Correct Answer: C) border-collapse