HTML Table Exercises

This HTML Table Exercise provides practical questions and will cover all possible questions based on HTML Tables to ace you in the interview.

1. What is the basic HTML tag used to create a table?

The <table> tag is used to create a table in HTML. This tag starts the table structure.

<table>
 <!-- Table content goes here -->
</table>

2. What are the main elements used to define a table structure in HTML?

The main elements used to define a table structure include <table>, <tr> for table rows, <th> for headers, and <td> for data cells.

<table>
 <tr>
 <th>Header 1</th>
 <th>Header 2</th>
 </tr>
 <tr>
 <td>Cell 1</td>
 <td>Cell 2</td>
 </tr>
</table>

3. How to create a table header in HTML?

A table header is created using the <th> tag within a <tr> tag.

<table>
 <tr>
 <th>Header 1</th>
 <th>Header 2</th>
 </tr>
</table>

4. How to create a table row in HTML?

A table row is defined using the <tr> tag. Inside this tag, add <th> or <td> elements to create headers or data cells.

<table>
 <tr>
 <td>Row 1, Cell 1</td>
 <td>Row 1, Cell 2</td>
 </tr>
</table>

5. What is the purpose of the <th> tag in a table?

The <th> tag is used to define a header cell in a table.

<table>
 <tr>
 <th>Name</th>
 <th>Age</th>
 </tr>
</table>

6. How to merge cells in a table horizontally?

To merge cells horizontally, we can use the colspan attribute in the <td> tag.

7. How to merge cells in a table vertically?

To merge cells vertically, we can use the rowspan attribute in a <td> or <th> element.

8. What attribute is used to specify the number of columns a cell should span?

The colspan attribute specifies the number of columns a cell should span. It can be added to <td> or <th> elements to merge cells horizontally.

<td colspan="3">This cell spans 3 columns</td>

9. What attribute is used to specify the number of rows a cell should span?

The rowspan attribute specifies how many rows a cell should span in a table. It can be added to <td> or <th> elements to merge cells vertically.

<td rowspan="2">This cell spans 2 rows</td>

10. How do you add a caption to a table in HTML?

To add a caption to a table using the <caption> tag, which describes the table's content.

<table>
 <caption>Table Caption</caption>
</table>

11. How can you make a table responsive using CSS?

To make a table responsive, use CSS properties like overflow-x: auto; on a container element.

HTML Syntax

<div class="table-responsive">
 <table>
 <!-- Table content -->
 </table>
</div>

CSS Syntax

.table-responsive {
 overflow-x: auto;
}

12. What is the purpose of the <caption> tag in a table?

The <caption> tag provides a title or explanation for the table, improving accessibility and clarity for users.

<table>
 <caption>Annual Sales Data</caption>
</table>

13. How do you style a table using CSS?

Style a table with the help of CSS by targeting the <table>, <th>, and <td> elements to customize borders, padding, and colors.

14. What are the differences between block-level and inline elements in the context of tables?

In the context of tables, block-level elements (like <tr>) occupy the full width of their container and start on a new line, while inline elements (like <td>) only take up the width necessary for their content and do not start a new line.

15. How can you create a nested table in HTML?

A nested table is created by placing a <table> tag inside a <td> element of a parent table.

16. What is the significance of the <tbody>, <thead>, and <tfoot> tags in a table?

The <thead>, <tbody>, and <tfoot> tags define different sections of a table. They help structure the data, making it easier to read and manage.

• <thead>: Defines the table's header section, typically containing column headings, and helps browsers understand this as a distinct part of the table.
• <tbody>: Contains the main body of the table data, grouping the rows that hold the primary information, making it easier to manage and style the main content.
• <tfoot>: Represents the footer section of a table, usually containing summary or totals, and helps browsers keep footer content fixed for display or printing purposes.

17. How do you add a border to a table in HTML?

To add a border to a table, you can use the border attribute directly on the <table> tag or style it using CSS.

HTML Syntax

<table border="1">
 <tr>
 <td>Data</td>
 </tr>
</table>

CSS Syntax

table {
 border: 1px solid black;
}

18. How can you control the spacing between cells in a table?

The spacing between cells can be controlled using the cellspacing attribute in HTML or the border-spacing property in CSS.

HTML Syntax

<table cellspacing="10">
 <tr>
 <td>Data</td>
 </tr>
</table>

CSS Syntax

table {
 border-spacing: 10px;
}

19. What is the default behavior of table layout in HTML?

The default behavior of a table layout is auto, where the browser calculates column widths based on content.

20. How do you change the alignment of text within table cells?

To change the alignment of text within table cells using the align attribute in HTML or the text-align property in CSS.

HTML Syntax

<td align="center">Centered Text</td>

CSS Syntax

td {
 text-align: center;
}

21. How can you use CSS to highlight a row on hover?

To highlight a row on hover, you can use the :hoverpseudo-class in CSS to change the background color of the row.

HTML Syntax

<table>
 <tr>
 <td>Data</td>
 </tr>
</table>

CSS Syntax

tr:hover {
 background-color: lightgray;
}

22. What is a fixed table layout, and how do you implement it?

A fixed table layout sets a fixed width for the table, allowing the browser to determine column widths based on the table's width rather than the content.

23. What is the best practice for defining a table layout in HTML?

The best practice for defining a table layout includes using semantic tags like <thead>, <tbody>, and <tfoot>, and avoiding the use of deprecated attributes like align and valign.

24. How can you create alternating row colors in a table for better readability?

To create alternating row colors, use CSS with the :nth-child() selector to style rows differently based on their order.

25. What is the importance of accessibility in table design?

Accessibility in table design ensures that all users, including those using assistive technologies, can understand and navigate the table effectively.

26. How do you add images within a table cell?

To add images within a table cell, use the <img> tag inside a <td>. This allows to display the image alongside any text or other content in the cell.

<table>
 <tr>
 <td><img src="image.jpg" alt="Description" /></td>
 </tr>
</table>

27. What is the role of the <col> and <colgroup> elements in a table?

The <col> element is used to define column properties for a table, like width or background color. The <colgroup> element groups one or more <col> elements together, allowing you to apply styles to multiple columns at once, enhancing table design.

28. How can you hide certain columns from display using CSS?

To hide specific columns in a table use the display: none; style on the <td> or <th> elements.

td.hidden, th.hidden {
 display: none;
}

29. What is the significance of using semantic HTML in tables?

Using semantic HTML in tables makes the content clearer and more understandable for both people and machines.

30. How can you use JavaScript to dynamically add rows to a table?

Use JavaScript to add rows to a table by selecting the table element and creating a new row and cells. Then, append these cells to the row and the row to the table.