Tables in HTML — Interview Questions & Answers

Introduction to Tables

Ques: What is the purpose of tables in HTML?

Ans: Tables are used to organize and display data in rows and columns.

Example:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

Basic Table Structure

Tag	Description
<table>	Defines the table
<tr>	Table row
<th>	Table header cell (bold + centered)
<td>	Table data cell

Ques: What is the difference between <th> and <td>?

Tag	Purpose	Default Style
<th>	Header cell	Bold, centered
<td>	Data cell	Normal text, left-aligned

Table Head, Body, and Footer

Ques: What are <thead>, <tbody>, and <tfoot> used for?

Ans: They group parts of the table for semantic meaning and styling.

<table>
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>John</td><td>25</td></tr>
    <tr><td>Mary</td><td>30</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">End of Data</td></tr>
  </tfoot>
</table>

Table Attributes

Ques: What are common table attributes?

Attribute	Description	Example
border	Defines table border width	<table border="1">
cellpadding	Space between cell content and border	<table cellpadding="10">
cellspacing	Space between cells	<table cellspacing="5">
width	Table width	<table width="100%">
align	Table alignment (deprecated)	<table align="center">

Column Spanning & Row Spanning

Ques: What is colspan used for?

Ans: It merges multiple columns into one cell.

<td colspan="2">Merged Column</td>

Ques: What is rowspan used for?

Ans: It merges multiple rows into one cell.

<td rowspan="2">Merged Row</td>

Example of combined use:

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Contact</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Email</td>
    <td>Phone</td>
  </tr>
</table>

Adding Captions

Ques: What is the <caption> tag used for?

Ans: To give a title or description to the table.

<table>
  <caption>Employee Information</caption>
  ...
</table>

Ques: Where should the <caption> be placed?

Ans: Immediately after the <table> tag.

Styling Tables with CSS

Ques: How can you add borders with CSS?

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Ques: What does border-collapse: collapse; do?

Ans: It merges adjacent borders into a single border for a cleaner look.

Ques: Example with background and padding:

th {
  background-color: lightblue;
  padding: 10px;
}
td {
  padding: 8px;
}

Table Alignment and Width

Ques: How can you align text in table cells?

th, td {
  text-align: left;
  vertical-align: top;
}

Ques: How do you make the table responsive?

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

Advanced Features

Ques: How can you make table headers sticky while scrolling?

thead th {
  position: sticky;
  top: 0;
  background: white;
}

Ques: How do you alternate row colors?

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Accessibility in Tables

Ques: How do you make tables accessible for screen readers?

• Use <th> for headers.
• Use scope attribute (scope="col" or scope="row") to define relationships.
• Add <caption> for description.

Example:

<th scope="col">Name</th>
<th scope="col">Age</th>

Ques: What is the role of the <summary> attribute in tables?

Ans: It used to describe complex tables for screen readers, but it’s deprecated in HTML5 — use <caption> instead.

Advanced Interview Questions

Ques: Can you nest tables in HTML?

Ans: Yes, a table can be placed inside a <td>, but it’s rarely recommended due to complexity.

Ques: How can you span multiple headers across rows and columns?

Ans: Use both colspan and rowspan:

<th rowspan="2">Name</th>
<th colspan="2">Contact</th>

Ques: How to highlight a table row when hovering?

tr:hover {
  background-color: #ddd;
}