tables - html Interview Questions | Preplance

1. Which tag is used to define header cells in a table?

Difficulty: EasyType: MCQTopic: Tables

The th tag is used to define header cells in a table. The th stands for table header. Header cells are typically used in the first row or first column to label what each column or row represents. By default, content in th cells is bold and center-aligned, making headers stand out visually. More importantly, th tags have semantic meaning. Screen readers use th tags to help visually impaired users understand table structure and navigate data. You can use the scope attribute with th tags to explicitly specify whether the header is for a column or row. This improves accessibility. Using th instead of td for headers is a best practice that makes your tables more semantic and accessible.

Example code

<!-- Table with header row -->
<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>$999</td>
    <td>15</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>$25</td>
    <td>50</td>
  </tr>
</table>

2. Which tag is used to create a table in HTML?

Difficulty: EasyType: MCQTopic: Tables

The table tag is used to create a table in HTML. Tables are used to organize data in rows and columns, making it easy to display structured information like schedules, price lists, or comparison charts. A basic table consists of several elements working together. The table tag is the container for the entire table. The tr tag defines table rows. The td tag defines table data cells. The th tag defines table header cells. Every table must have at least one row with at least one cell. Tables are block-level elements that take up the full width available by default. Modern web development uses tables primarily for tabular data, not for page layout. CSS grid and flexbox are preferred for layouts. Understanding proper table structure is essential for displaying data effectively.

Example code

<!-- Basic table structure -->
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Sarah</td>
    <td>30</td>
  </tr>
</table>

3. What does the colspan attribute do in a table cell?

Difficulty: MediumType: MCQTopic: Table Attributes

The colspan attribute makes a table cell span across multiple columns. When you set colspan to a number, that cell takes up that many columns worth of space. For example, colspan equals 2 means the cell spans two columns. This is useful when you need to merge cells horizontally, such as creating section headers that span multiple columns. When using colspan, remember that the total number of cells in each row should match. If one row has a cell with colspan equals 2, you need one fewer cell in that row. The remaining cells in the row will appear after the spanning cell. Colspan is commonly used for creating complex table layouts, grouping related columns under a common header, or creating summary rows.

Example code

<!-- Cell spanning 2 columns -->
<table border="1">
  <tr>
    <th colspan="2">Full Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>25</td>
  </tr>
</table>

<!-- Header spanning all columns -->
<table border="1">
  <tr>
    <th colspan="3">Employee Information</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Department</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>HR</td>
    <td>$60,000</td>
  </tr>
</table>

4. What does the rowspan attribute do in a table cell?

Difficulty: MediumType: MCQTopic: Table Attributes

The rowspan attribute makes a table cell span across multiple rows vertically. When you set rowspan to a number, that cell extends down through that many rows. For example, rowspan equals 3 means the cell spans three rows vertically. This is useful when you have data that applies to multiple rows, such as category labels or grouped information. When using rowspan, be careful with the number of cells in subsequent rows. If a cell from a previous row is spanning down, you need one fewer cell in the current row. Rowspan is commonly used for creating hierarchical tables, displaying grouped data, or showing information that applies to multiple entries. Understanding both colspan and rowspan is essential for creating complex table layouts.

Example code

<!-- Cell spanning 2 rows -->
<table border="1">
  <tr>
    <td rowspan="2">Monday</td>
    <td>Morning</td>
    <td>Math</td>
  </tr>
  <tr>
    <td>Afternoon</td>
    <td>Science</td>
  </tr>
</table>

<!-- Category spanning multiple items -->
<table border="1">
  <tr>
    <td rowspan="3">Fruits</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Banana</td>
  </tr>
  <tr>
    <td>Orange</td>
  </tr>
  <tr>
    <td rowspan="2">Vegetables</td>
    <td>Carrot</td>
  </tr>
  <tr>
    <td>Broccoli</td>
  </tr>
</table>

5. What is the <tfoot> tag used for in tables?

Difficulty: MediumType: MCQTopic: Tables

The tfoot tag is used to group footer content in a table, typically containing summary information like totals, averages, or notes. The tfoot should contain one or more tr tags with cells that summarize or conclude the table data. Common uses include displaying total sales, average scores, grand totals, or summary notes. The tfoot tag has special behavior. Even though it appears after tbody in the rendered table, you can place it before or after tbody in your HTML code. Browsers will always display tfoot at the bottom of the table. When printing long tables, browsers may repeat the tfoot on each printed page, similar to thead. Using tfoot provides semantic meaning and allows separate styling of the footer section. It is optional but recommended for tables with summary rows.

Example code

<!-- Table with tfoot -->
<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>10</td>
      <td>$20</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>15</td>
      <td>$30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
      <td>$50</td>
    </tr>
  </tfoot>
</table>

<!-- Sales report with summary -->
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$10,000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$12,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total Revenue</th>
      <td>$22,000</td>
    </tr>
  </tfoot>
</table>

6. Explain the purpose of colspan and rowspan with examples.

Difficulty: MediumType: SubjectiveTopic: Table Attributes

Colspan and rowspan are attributes that allow table cells to span multiple columns or rows, creating more complex and flexible table layouts. Understanding these attributes is essential for creating professional tables with merged cells. Colspan makes a cell span horizontally across multiple columns. You set colspan to the number of columns you want the cell to occupy. For example, colspan equals 2 means the cell takes up two columns worth of space. This is useful in several scenarios. First, creating section headers that span multiple columns, such as a header saying Personal Information spanning columns for name, email, and phone. Second, creating summary rows where a label like Total spans multiple columns while the sum appears in the last column. Third, merging cells to create more readable layouts when related information naturally groups together. When using colspan, remember that the total number of cells in each row must match when you count spanning cells as multiple cells. If one row has three regular cells, and another row has one cell with colspan equals 2 and one regular cell, both rows effectively have three columns. Rowspan makes a cell span vertically down through multiple rows. You set rowspan to the number of rows you want the cell to occupy. For example, rowspan equals 3 means the cell extends down through three rows. This is useful for several purposes. First, displaying category labels that apply to multiple rows of data, such as a department name that applies to several employees. Second, creating hierarchical data displays where parent information spans multiple child rows. Third, making tables more compact by avoiding repetition of information that applies to multiple entries. When using rowspan, be careful with cell counting in subsequent rows. If a cell from a previous row is spanning down into the current row, you need one fewer cell in the current row. The browser automatically positions cells to account for the spanning cell above. You can combine colspan and rowspan on the same cell to span both horizontally and vertically. For example, a cell with colspan equals 2 and rowspan equals 2 occupies a 2 by 2 block of space. This creates even more complex layouts. Common use cases for these attributes include creating calendar layouts where events span multiple time slots, building timetables where classes span multiple periods, designing comparison tables with grouped features, and creating invoice or receipt layouts with subtotals and totals. When using colspan and rowspan, proper planning is important. Sketch your table structure before coding to ensure cells align correctly. Mistakes in counting can cause cells to misalign or appear in unexpected positions. For accessibility, make sure your table still makes logical sense to screen reader users. Use appropriate th tags and scope attributes to maintain clear relationships between headers and data. Understanding colspan and rowspan demonstrates advanced table skills and is frequently tested in technical interviews through questions about creating complex table layouts or debugging misaligned tables.

Example code

<!-- COLSPAN Examples -->

<!-- Header spanning multiple columns -->
<table border="1">
  <tr>
    <th colspan="3">Employee Information</th>
  </tr>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
    <td>555-1234</td>
  </tr>
</table>

<!-- Summary row with colspan -->
<table border="1">
  <tr>
    <th>Item</th>
    <th>Quantity</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>2</td>
    <td>$2,000</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>5</td>
    <td>$125</td>
  </tr>
  <tr>
    <td colspan="2">Total</td>
    <td>$2,125</td>
  </tr>
</table>

<!-- ROWSPAN Examples -->

<!-- Category spanning multiple rows -->
<table border="1">
  <tr>
    <th rowspan="3">Fruits</th>
    <td>Apple</td>
    <td>$2</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>$1</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>$3</td>
  </tr>
  <tr>
    <th rowspan="2">Vegetables</th>
    <td>Carrot</td>
    <td>$1.50</td>
  </tr>
  <tr>
    <td>Broccoli</td>
    <td>$2.50</td>
  </tr>
</table>

<!-- COMBINING colspan and rowspan -->
<table border="1">
  <tr>
    <th colspan="2" rowspan="2">Schedule</th>
    <th>Monday</th>
    <th>Tuesday</th>
  </tr>
  <tr>
    <td>Math</td>
    <td>Science</td>
  </tr>
  <tr>
    <th rowspan="2">Morning</th>
    <th>9-10 AM</th>
    <td>Algebra</td>
    <td>Physics</td>
  </tr>
  <tr>
    <th>10-11 AM</th>
    <td>Geometry</td>
    <td>Chemistry</td>
  </tr>
</table>

7. What is the difference between <td> and <th> tags?

Difficulty: EasyType: SubjectiveTopic: Tables

The td and th tags both create cells in a table, but they serve different purposes and have different semantic meanings. Understanding the difference is important for creating accessible and well-structured tables. The td tag stands for table data and is used for regular data cells. These cells contain the actual data or content of your table. By default, content in td cells is left-aligned and displayed in normal font weight. Data cells make up the body of your table where the actual information resides. You use td for all standard content cells that are not headers. The th tag stands for table header and is used for header cells that label columns or rows. By default, content in th cells is bold and center-aligned, making headers visually distinct from data. But the visual difference is just the beginning. The more important distinction is semantic. The th tag tells browsers, search engines, and assistive technologies that this cell is a header that describes other cells. This semantic meaning is crucial for accessibility. Screen readers use th tags to help visually impaired users understand table structure. When a screen reader user navigates to a data cell, it can announce the associated headers, giving context to the data. For example, if a table has column headers for Name and Age, when the user reaches a data cell containing 25, the screen reader can announce Age 25, helping the user understand what the number represents. Using th appropriately is essential for web accessibility standards like WCAG. The th tag can be used in header rows at the top of tables, header columns on the left side of tables, or both for tables with row and column headers. You can enhance th tags with the scope attribute to explicitly specify whether the header is for a column with scope equals col or a row with scope equals row. This provides even clearer relationships for assistive technologies. In complex tables with multiple header levels, proper use of th with scope becomes even more important. Best practices include using th for all cells that serve as labels or headers, using td for all cells containing data, adding scope attributes to th cells for clarity, and ensuring your table makes logical sense when read by a screen reader. A common mistake is using td for headers and just styling them to look bold. This creates tables that look correct visually but fail accessibility standards. Always use th for semantic headers. Understanding the semantic difference between td and th demonstrates knowledge of accessible web development and is a common interview topic. Many companies specifically ask about creating accessible tables in technical interviews.

Example code

<!-- Using th for headers, td for data -->
<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>30</td>
    <td>London</td>
  </tr>
</table>

<!-- Row headers using th -->
<table border="1">
  <tr>
    <th>Product</th>
    <td>Laptop</td>
  </tr>
  <tr>
    <th>Price</th>
    <td>$999</td>
  </tr>
  <tr>
    <th>Stock</th>
    <td>15 units</td>
  </tr>
</table>

<!-- Both row and column headers -->
<table border="1">
  <tr>
    <th></th>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
    <th scope="col">Q3</th>
  </tr>
  <tr>
    <th scope="row">Sales</th>
    <td>$10,000</td>
    <td>$12,000</td>
    <td>$15,000</td>
  </tr>
  <tr>
    <th scope="row">Expenses</th>
    <td>$8,000</td>
    <td>$9,000</td>
    <td>$10,000</td>
  </tr>
</table>

<!-- BAD: Using td for headers (not accessible) -->
<table border="1">
  <tr>
    <td><strong>Name</strong></td>
    <td><strong>Age</strong></td>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

<!-- GOOD: Using th for headers (accessible) -->
<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

8. How do you create a table with headers and footer sections?

Difficulty: MediumType: SubjectiveTopic: Tables

Creating a table with headers and footer sections involves using the semantic HTML5 elements thead, tbody, and tfoot to properly structure your table into logical sections. This structure provides numerous benefits for styling, accessibility, and functionality. The thead element groups the header rows of a table. It typically contains one or more tr tags with th cells that label the columns. The thead should be placed immediately after the opening table tag and any caption. Headers in thead might include column names, column labels, or any information that describes what each column contains. The tbody element groups the main content rows of a table. It contains the primary data that the table displays. Most of your tr tags with td cells will be inside tbody. You can have multiple tbody elements in a single table if you want to group related rows together. For example, you might separate different quarters in a sales report using multiple tbody sections. The tfoot element groups the footer rows of a table. It typically contains summary information such as totals, averages, conclusions, or notes. Even though tfoot appears at the bottom when rendered, you can place it before or after tbody in your HTML code. Browsers will always display it at the end of the table. This flexibility allows you to define the footer early in your code, which can be useful for dynamic tables. The complete structure follows this order. First, the opening table tag and optional caption. Second, thead with header rows. Third, tbody with data rows. Fourth, tfoot with summary rows. Fifth, closing table tag. Note that tfoot can also be placed before tbody in the HTML code. Using these semantic sections provides several advantages. First, improved accessibility. Screen readers can use these sections to help users navigate large tables more efficiently. Users can jump directly to the header, body, or footer sections. Second, better styling control. You can apply different CSS styles to each section independently. For example, making the header sticky while scrolling, giving the footer a different background color, or styling alternate rows within tbody. Third, print optimization. When printing long tables, browsers can repeat thead and tfoot on each printed page, ensuring headers and footers appear on every page. Fourth, semantic clarity. The code clearly indicates which rows are headers, which are data, and which are summaries. This makes the code more maintainable and easier to understand. Fifth, JavaScript manipulation. When working with tables in JavaScript, having clear sections makes it easier to target specific parts of the table for updates or interactions. Best practices include always using thead for header rows even if you only have one header row, wrapping all data rows in tbody even if you only have one tbody section, using tfoot when you have summary information like totals or averages, combining these elements with th and scope attributes for maximum accessibility, and using CSS to style each section appropriately for visual hierarchy. A complete example includes a caption for the table title, thead with column headers using th and scope equals col, tbody with multiple data rows using td, and tfoot with a summary row that might use colspan for labels and calculations. Understanding how to properly structure tables with semantic sections demonstrates professional HTML skills and is essential for creating accessible web applications. This topic is commonly discussed in interviews about web standards and accessibility.

Example code

<!-- Complete table with all sections -->
<table>
  <caption>Quarterly Sales Report 2024</caption>
  
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Revenue</th>
      <th scope="col">Expenses</th>
      <th scope="col">Profit</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>January</td>
      <td>$10,000</td>
      <td>$7,000</td>
      <td>$3,000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$12,000</td>
      <td>$8,000</td>
      <td>$4,000</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$15,000</td>
      <td>$10,000</td>
      <td>$5,000</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>$37,000</td>
      <td>$25,000</td>
      <td>$12,000</td>
    </tr>
  </tfoot>
</table>

<!-- With CSS styling -->
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  caption {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  thead {
    background-color: #4CAF50;
    color: white;
  }
  
  tbody tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  
  tbody tr:hover {
    background-color: #ddd;
  }
  
  tfoot {
    background-color: #333;
    color: white;
    font-weight: bold;
  }
  
  th, td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ddd;
  }
</style>

<!-- Multiple tbody sections for grouping -->
<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td colspan="2"><strong>Electronics</strong></td>
    </tr>
    <tr>
      <td>Laptop</td>
      <td>$999</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>$25</td>
    </tr>
  </tbody>
  
  <tbody>
    <tr>
      <td colspan="2"><strong>Accessories</strong></td>
    </tr>
    <tr>
      <td>Bag</td>
      <td>$50</td>
    </tr>
    <tr>
      <td>Cable</td>
      <td>$10</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
      <td>Total Items</td>
      <td>4</td>
    </tr>
  </tfoot>
</table>

9. What is the purpose of the <thead> tag?

Difficulty: MediumType: MCQTopic: Tables

The thead tag is used to group the header content in a table. It is a semantic container that wraps the rows containing column headers. The thead tag should contain one or more tr tags with th cells. Using thead has several benefits. First, it provides semantic meaning, helping browsers and screen readers understand the table structure. Second, when printing long tables, browsers can repeat the thead on each printed page. Third, it allows for easier styling of the header section separately from the body. The thead tag is optional but recommended for well-structured tables. It should be placed after the caption if present, and before tbody and tfoot. Modern web development uses thead, tbody, and tfoot to create clearly defined table sections.

Example code

<!-- Table with thead -->
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>555-1234</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>jane@example.com</td>
      <td>555-5678</td>
    </tr>
  </tbody>
</table>

10. Which tag is used to define a row in an HTML table?

Difficulty: EasyType: MCQTopic: Tables

The tr tag is used to define a row in an HTML table. The tr stands for table row. Each row in a table is wrapped in a tr tag. Inside each tr tag, you place td tags for data cells or th tags for header cells. All cells in a row appear horizontally aligned. The number of cells in each row should generally be consistent across the table, unless you use colspan or rowspan attributes. Tables are built row by row, from top to bottom. Each tr tag represents one horizontal line of data in your table. Understanding how rows are structured is fundamental to working with HTML tables.

Example code

<!-- Table with three rows -->
<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
  <tr>
    <td>Row 3, Cell 1</td>
    <td>Row 3, Cell 2</td>
  </tr>
</table>

11. Which tag is used to define a standard data cell in a table?

Difficulty: EasyType: MCQTopic: Tables

The td tag is used to define a standard data cell in a table. The td stands for table data. Each td tag represents one cell in the table containing actual data. Data cells are placed inside tr tags. By default, the content in td cells is left-aligned and displayed in normal font weight. You can include any HTML content inside td tags, including text, images, links, or even other tables. Each td in a row creates a new column. The number of td tags in each row determines the number of columns in your table. Understanding the difference between td for data and th for headers is important for creating semantic and accessible tables.

Example code

<!-- Table with data cells -->
<table>
  <tr>
    <td>Apple</td>
    <td>$2.50</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>$1.80</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>$3.00</td>
  </tr>
</table>

12. Which tag is used to add a caption or title to a table?

Difficulty: MediumType: MCQTopic: Tables

The caption tag is used to add a title or caption to a table. The caption must be placed immediately after the opening table tag, before any tr tags. It provides a brief description of the table contents. By default, the caption appears centered above the table. You can change its position using CSS. The caption tag is important for accessibility because it helps screen readers announce what the table is about before reading the data. It also improves the user experience by giving context to the table. Good captions are concise and descriptive, explaining what data the table contains. Using captions is considered a best practice for creating accessible and user-friendly tables.

Example code

<!-- Table with caption -->
<table>
  <caption>Monthly Sales Report</caption>
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$5,000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$6,200</td>
  </tr>
</table>

<!-- Caption with styling -->
<table>
  <caption style="font-weight: bold; font-size: 1.2em;">Employee Directory</caption>
  <tr>
    <th>Name</th>
    <th>Department</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Engineering</td>
  </tr>
</table>

13. Which tag is used to group the main content rows of a table?

Difficulty: MediumType: MCQTopic: Tables

The tbody tag is used to group the main content rows of a table. It contains the primary data rows, excluding headers and footers. The tbody tag wraps multiple tr tags that contain the actual table data. Using tbody provides semantic structure to your table. It clearly separates the body content from headers in thead and summaries in tfoot. This separation allows for independent styling of each section using CSS. For accessibility, screen readers can use these sections to help users navigate large tables more efficiently. The tbody tag is technically optional. If you do not include it, browsers will automatically wrap your data rows in an implied tbody. However, explicitly including tbody is a best practice for clear, maintainable code. You can have multiple tbody elements in one table to group related rows together.

Example code

<!-- Table with tbody -->
<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$999</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>$25</td>
    </tr>
    <tr>
      <td>Keyboard</td>
      <td>$75</td>
    </tr>
  </tbody>
</table>

<!-- Multiple tbody for grouping -->
<table>
  <tbody>
    <tr>
      <td colspan="2"><strong>Q1 Sales</strong></td>
    </tr>
    <tr>
      <td>January</td>
      <td>$5,000</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td colspan="2"><strong>Q2 Sales</strong></td>
    </tr>
    <tr>
      <td>April</td>
      <td>$6,000</td>
    </tr>
  </tbody>
</table>

14. Which HTML attribute adds borders to a table?

Difficulty: EasyType: MCQTopic: Tables

The border attribute adds borders to a table and its cells. You can set border to 1 to add a simple border, or to higher numbers for thicker borders. For example, border equals 1 creates a basic border around the table and between cells. However, the border attribute is deprecated in HTML5. Modern web development uses CSS for styling borders instead. Using CSS gives you much more control over border appearance, including color, style, and thickness. You can style borders differently for the table, rows, and individual cells. Common CSS properties include border, border-collapse, border-spacing, and border-color. The border-collapse property is particularly important. Setting it to collapse removes the space between cell borders, creating a cleaner look. Understanding both the legacy HTML border attribute and modern CSS border styling is useful for interviews.

Example code

<!-- Old HTML way (deprecated) -->
<table border="1">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

<!-- Modern CSS way (recommended) -->
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

15. What is the purpose of the scope attribute in <th> tags?

Difficulty: MediumType: MCQTopic: Table Attributes

The scope attribute specifies whether a header cell is for a column or row, improving table accessibility. The scope attribute can have four values. Scope equals col indicates the header is for a column. Scope equals row indicates the header is for a row. Scope equals colgroup indicates the header is for a group of columns. Scope equals rowgroup indicates the header is for a group of rows. Using the scope attribute helps screen readers associate header cells with data cells correctly. This is crucial for visually impaired users to understand table relationships. For simple tables, browsers can often infer the scope automatically. However, for complex tables with multiple header levels or irregular structures, explicitly setting scope is important. The scope attribute is a key part of creating accessible tables and is considered a web accessibility best practice.

Example code

<!-- Column headers with scope -->
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
    <th scope="col">Country</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>USA</td>
  </tr>
</table>

<!-- Row headers with scope -->
<table>
  <tr>
    <th scope="row">Monday</th>
    <td>9:00 AM</td>
    <td>Meeting</td>
  </tr>
  <tr>
    <th scope="row">Tuesday</th>
    <td>2:00 PM</td>
    <td>Workshop</td>
  </tr>
</table>

<!-- Mixed headers -->
<table>
  <tr>
    <th></th>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
  </tr>
  <tr>
    <th scope="row">Sales</th>
    <td>$10k</td>
    <td>$12k</td>
  </tr>
  <tr>
    <th scope="row">Profit</th>
    <td>$2k</td>
    <td>$3k</td>
  </tr>
</table>

Master Interviews
Anywhere, Anytime

Tables – HTML interview questions

Set overview

HTML – Tables questions (15)

1. Which tag is used to define header cells in a table?

Continue your preparation

2. Which tag is used to create a table in HTML?

3. What does the colspan attribute do in a table cell?

4. What does the rowspan attribute do in a table cell?

5. What is the <tfoot> tag used for in tables?

6. Explain the purpose of colspan and rowspan with examples.

7. What is the difference between <td> and <th> tags?

8. How do you create a table with headers and footer sections?

9. What is the purpose of the <thead> tag?

10. Which tag is used to define a row in an HTML table?

11. Which tag is used to define a standard data cell in a table?

12. Which tag is used to add a caption or title to a table?

13. Which tag is used to group the main content rows of a table?

14. Which HTML attribute adds borders to a table?

15. What is the purpose of the scope attribute in <th> tags?

More sets in HTML

Explore related subjects

Master Interviews Anywhere, Anytime

Tables – HTML interview questions

Set overview

1. Which tag is used to define header cells in a table?

Continue your preparation

2. Which tag is used to create a table in HTML?

3. What does the colspan attribute do in a table cell?

4. What does the rowspan attribute do in a table cell?

5. What is the <tfoot> tag used for in tables?

6. Explain the purpose of colspan and rowspan with examples.

7. What is the difference between <td> and <th> tags?

8. How do you create a table with headers and footer sections?

9. What is the purpose of the <thead> tag?

10. Which tag is used to define a row in an HTML table?

11. Which tag is used to define a standard data cell in a table?

12. Which tag is used to add a caption or title to a table?

13. Which tag is used to group the main content rows of a table?

14. Which HTML attribute adds borders to a table?

15. What is the purpose of the scope attribute in <th> tags?

More sets in HTML

Explore related subjects

Master Interviews
Anywhere, Anytime