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
8 min read
HTML Tables
HTML Tables allow you to arrange data into rows and columns on a web page, making it easy to display information like schedules, statistics, or other structured data in a clear format. An HTML table is created using the <table> tag. Basic HTML Table StructureAn HTML table is created using the
10 min read
Primer CSS HTML
Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns ar
3 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 Div Tag
The HTML <div> tag defines sections in HTML documents, serving as containers styled with CSS or controlled with JavaScript. It's easily customized using class or id attributes and can contain various content. Note: Browsers add line breaks before and after <div> elements by default. Div
4 min read
HTML Examples
HTML (HyperText Markup Language) is the backbone of the web, providing the structural foundation for websites. Whether you're a beginner learning the basics or an experienced developer seeking quick references, examples are the most effective way to understand HTML concepts in action. In this articl
2 min read
HTML <table> Tag
HTML <table> tag is utilized to create tables on a webpage. It helps in structuring and displaying data in an organized and tabular manner. It helps to render the information in rows and columns, utilizing elements like <tr>, <th>, and <td> to specify different parts of the t
2 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> el
5 min read
How to Create Table in HTML?
HTML tables are used for organizing and displaying data in a structured format on web pages. Tables are commonly used for product information, presenting data analytics, or designing a pricing comparison chart. Elements of HTML TableTable Elements Description <table> The <table> element
4 min read