In this lab, students will learn how to create and manipulate HTML tables using fundamental HTML table tags and attributes. The lab focuses on understanding the core structure of HTML tables, including essential tags like <table>, <tr>, <td>, and <th>, which are crucial for organizing and presenting data in a structured grid-like format on web pages.
Participants will progress through a comprehensive learning journey that covers creating basic tables, adding headers and body sections, merging cells using colspan and rowspan, and applying basic styling attributes. By the end of the lab, students will have practical skills in constructing well-structured HTML tables, understanding how to represent data effectively using HTML table elements and their associated attributes.
Understand HTML Table Structure and Basic Tags
In this step, you'll learn the fundamental structure and basic tags used to create HTML tables. HTML tables are essential for organizing and displaying data in a structured, grid-like format on web pages.
HTML tables are created using several key tags:
<table>: The main container for the entire table
<tr>: Defines a table row
<td>: Defines a standard table cell (data cell)
<th>: Defines a table header cell
Let's create a simple example to demonstrate these basic table tags. Open the WebIDE and create a new file called basic_table.html in the ~/project directory.
<th> is used for header cells (typically bold and centered)
<td> is used for standard data cells
The border attribute helps visualize the table structure (though CSS is preferred for styling in real-world applications)
Create a Simple Table with Rows and Columns
In this step, you'll learn how to create a more complex table with multiple rows and columns. Building on the previous step, we'll explore how to structure tables with different numbers of rows and columns to display information effectively.
Open the WebIDE and create a new file called product_table.html in the ~/project directory. We'll create a product inventory table to demonstrate table creation with multiple rows and columns.
Key points about creating tables with multiple rows and columns:
Each <tr> (table row) represents a horizontal row in the table
Inside each <tr>, multiple <td> (table data) elements create columns
The number of <td> elements in each <tr> determines the number of columns
All rows should have the same number of columns for a consistent layout
The border attribute helps visualize the table structure
Notice how we've created a 4-column table with:
First row as column headers
Three additional rows with product information
Each row contains four cells corresponding to the columns
Example output in a web browser would show a 4x4 grid displaying product inventory details.
Add Table Headers and Body Sections
In this step, you'll learn how to improve table structure by using semantic HTML tags <thead>, <tbody>, and <tfoot> to organize table content more effectively. These tags help improve the readability and accessibility of your HTML tables.
Open the WebIDE and create a new file called student_grades.html in the ~/project directory. We'll create a student grade table demonstrating the use of table section tags.
These semantic tags help improve table structure and accessibility
The example demonstrates:
A header row with column titles using <th>
Multiple data rows in the <tbody>
A footer row with class averages in <tfoot>
Example output in a web browser would show a structured table with clear sections for headers, body, and footer.
Merge Table Cells Using Colspan and Rowspan
In this step, you'll learn how to merge table cells horizontally and vertically using colspan and rowspan attributes. These attributes allow you to create more complex and flexible table layouts by combining multiple cells.
Open the WebIDE and create a new file called event_schedule.html in the ~/project directory. We'll create an event schedule table demonstrating cell merging.
Example: <td colspan="2"> spans the cell across 2 columns
rowspan: Merges cells vertically across rows
Example: <td rowspan="2"> spans the cell across 2 rows
When using these attributes, remove the corresponding cells in other rows
In this example:
The "Keynote Speech" spans 2 rows in Room A
The "Lunch Break" spans 2 columns across both rooms
Other cells maintain their standard single-cell layout
Example output in a web browser would show a table with merged cells creating a more compact and organized schedule.
Style and Customize Table Attributes
In this step, you'll learn how to style and customize HTML tables using inline CSS and HTML attributes. Proper styling can improve the readability and visual appeal of your tables.
Open the WebIDE and create a new file called styled_table.html in the ~/project directory. We'll create a table with various styling techniques.
border-collapse: Removes spacing between table cells
Custom font and typography
Colored header row
Alternating row colors using :nth-child(even)
Hover effect on table rows
Padding and border styling for cells
Styling options include:
Inline CSS in <style> tag
Separate CSS file (recommended for larger projects)
Inline styles using style attribute
CSS properties for layout, colors, and interactivity
Example output in a web browser would show a professionally styled, easy-to-read table with hover and color effects.
Summary
In this lab, participants learned the fundamentals of creating HTML tables using essential HTML tags such as <table>, <tr>, <td>, and <th>. The lab guided learners through understanding table structure, creating basic tables with rows and columns, and exploring techniques for adding headers, merging cells, and customizing table attributes.
The practical exercises demonstrated how to construct structured, grid-like data presentations in web pages, covering key concepts like defining table rows, creating header and data cells, and using attributes like border to enhance table visualization. Participants gained hands-on experience in building semantic and well-organized HTML tables that can effectively display information across various web design scenarios.
