This HTML Table Exercise provides practical questions and will cover all possible questions based on HTML Tables to ace you in the interview.
The <table> tag is used to create a table in HTML. This tag starts the table structure.
<table>
<!-- Table content goes here -->
</table>
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>
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>
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>
The <th> tag is used to define a header cell in a table.
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</table>
To merge cells horizontally, we can use the colspan attribute in the <td> tag.
HTML
<table>
<tr>
<th>Name</th>
<th>Expense</th>
</tr>
<tr>
<td>Arun</td>
<td>$10</td>
</tr>
<tr>
<td>Priya</td>
<td>$8</td>
</tr>
<tr>
<td colspan="2">Sum: $18</td>
</tr>
</table>
To merge cells vertically, we can use the rowspan attribute in a <td> or <th> element.
HTML
<table>
<tr>
<td rowspan="2">Merged Cell</td>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
</tr>
</table>
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>
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>
To add a caption to a table using the <caption> tag, which describes the table's content.
<table>
<caption>Table Caption</caption>
</table>
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;
}The <caption> tag provides a title or explanation for the table, improving accessibility and clarity for users.
<table>
<caption>Annual Sales Data</caption>
</table>
Style a table with the help of CSS by targeting the <table>, <th>, and <td> elements to customize borders, padding, and colors.
HTML
<table>
<tr>
<th>Header</th>
<td>Data</td>
</tr>
</table>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
}
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.
A nested table is created by placing a <table> tag inside a <td> element of a parent table.
HTML
<table>
<tr>
<td>
<table>
<tr>
<td>Nested Data</td>
</tr>
</table>
</td>
</tr>
</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.
HTML
<table>
<thead>
<tr>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer</td>
</tr>
</tfoot>
</table>
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;
}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;
}The default behavior of a table layout is auto, where the browser calculates column widths based on content.
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 :hover pseudo-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;
}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.
HTML
<table style="table-layout: fixed; width: 100%;">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
table {
table-layout: fixed;
width: 100%;
}
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.
To create alternating row colors, use CSS with the :nth-child() selector to style rows differently based on their order.
HTML
<table>
<tr>
<td>Data 1</td>
</tr>
<tr>
<td>Data 2</td>
</tr>
</table>
tr:nth-child(even) {
background-color: #f2f2f2;
}
Accessibility in table design ensures that all users, including those using assistive technologies, can understand and navigate the table effectively.
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>
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.
HTML
<table>
<colgroup>
<col style="background-color: lightblue;" />
<col style="background-color: lightgreen;" />
</colgroup>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
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.
HTML
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</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.
HTML
<table id="myTable">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</table>
<button onclick="addRow()">Add Row</button>
function addRow() {
let table = document.getElementById("myTable");
let row = table.insertRow(-1);
let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
cell1.innerHTML = "New Name";
cell2.innerHTML = "New Age";
}
Similar Reads
HTML Image Exercises HTML is a fundamental skill for web development, and learning how to use images properly is an important part of creating engaging websites. The <img> tag allows you to embed images in your web pages, and with attributes like src, alt, width, and height, you can control how these images appear
8 min read
HTMLText Styling Exercises - 2024 HTML text styling is a foundational skill in web development, essential for creating visually appealing and readable content. From basic font changes to advanced CSS effects, these exercises will guide you through various methods to style text in HTML. Let's explore over 30+ exercises, progressing f
7 min read
Essential HTML Tags HTML stands for HyperText Markup Language. It is an important language to design web pages or websites. These websites are visible to anyone on the internet. HTML is a combination of Hypertext and Markup language. Where hypertext is a link between the webpages, and markup language is used to define
5 min read
HTML Examples HTML (HyperText Markup Language) is the backbone of the web, forming the structural foundation of every website. Whether you're just starting out or you're an experienced developer in need of a quick refresher, learning through examples is one of the most effective ways to understand HTML in action.
6 min read
HTML Examples HTML (HyperText Markup Language) is the backbone of the web, forming the structural foundation of every website. Whether you're just starting out or you're an experienced developer in need of a quick refresher, learning through examples is one of the most effective ways to understand HTML in action.
6 min read
HTML Elements An HTML Element consists of a start tag, content, and an end tag, which together define the element's structure and functionality. Elements are the basic building blocks of a webpage and can represent different types of content, such as text, links, images, or headings.For example, the <p> ele
5 min read