Practical 6: Tables and Lists
Objective:
To learn how to create tables and lists in HTML to organize and structure information effectively.
Introduction:
HTML tables allow web developers to arrange data into rows and columns.
In HTML, a table is a structure used to organize and display data in a grid format, consisting of rows and columns.
In HTML, a table is used to display data in a structured format, typically rows and columns.
The table-related tags in HTML are used to define the various components of a table, such as rows, cells, headers, and footers.
Basic Table Tags in HTML
<table>: Defines a table.
<tr>: Defines a row in a table.
<th>: Defines a header cell in a table (bold and centered by default).
<td>: Defines a standard cell in a table.
<caption>: Provides a caption or title for the table.
<thead>: Groups the header content in a table.
<tbody>: Groups the body content in a table.
<tfoot>: Groups the footer content in a table.
<colgroup>: Specifies a group of one or more columns in a table for formatting.
<col>: Specifies column properties for each column within a <colgroup> element.
The basic structure of an HTML table is:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
.png)
Instructions:
Open your index.html file created in Practical 5 .
Creating Tables:
Add a table inside the <body> tag:
Example:
|
<body>
<h1>Welcome to My First HTML Page</h1>
<p>This is a paragraph of text.</p>
<h2>Sample Table</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</table> </body> |
Output:
.png)
Replace the content within <td> tags with your own data.
Detailed Explanation of How to create table in html:
Creating Tables:
HTML Table <table> Tag:
The <table> tag is used to create tables in HTML.
Syntax:
<table>
<!-- Table rows and cells -->
</table>
Example 1:
|
<!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title> Table
Example</title> </head> <body> <h1> Table
Example</h1> <table
border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Los Angeles</td>
</tr> </table> </body> </html> |
Output:
.png)
Example2:
|
<!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Styled
Table Example</title> </head> <body> <h1>Styled Table
Example</h1> <table
border="1"> <tr> <th
style="font-style: italic; color: red;">Name</th> <th
style="font-style: italic; color: red;">Age</th> <th
style="font-style: italic; color: red;">Grade</th> </tr> <tr> <td>John
Doe</td>
<td>18</td>
<td>A</td> </tr> <tr> <td>Jane
Smith</td>
<td>19</td>
<td>B</td> </tr> <tr> <td>Emily
Johnson</td>
<td>17</td>
<td>A</td> </tr> <tr>
<td>Michael Brown</td>
<td>18</td>
<td>C</td> </tr> </table> </body> </html> |
Output:
.png)
Explanation of Example:
- The style attribute within the <th> tags is used to apply inline styles.
- font-style: italic; makes the text italic.
- color: red; changes the text color to red.
- The border="1" attribute in the <table> tag adds a border to the table for better visibility.
Explanation of Tags
- <table>
- Defines a table. It acts as a container for all other table-related tags.
- <tr>
- Defines a row in a table. It is used within <thead>, <tbody>, and <tfoot> to group cells into a row.
- <th>
- Defines a header cell in a table. Header cells are bold and centered by default. They are usually used within <thead>.
- <td>
- Defines a standard cell in a table. These cells contain the actual data and are typically used within <tbody>.
- <caption>
- Provides a caption or title for the table. This caption appears above the table by default.
- <thead>
- Groups the header content in a table. It helps to organize the header rows and makes the table more accessible.
- <tbody>
- Groups the body content in a table. It is used to encapsulate the main data rows of the table.
- <tfoot>
- Groups the footer content in a table. It is useful for summary rows or any footer-related information.
- <colgroup>
- Specifies a group of one or more columns in a table for formatting. It is used to apply styles to specific columns.
- <col>
- Specifies column properties for each column within a <colgroup> element. It allows for the application of styles to individual columns.
|
<!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>Complete
Table Example</title> </head> <body> <h1>Complete Table
Example</h1> <table
border="1">
<caption>Student Grades</caption> <colgroup> <col
span="1" style="background-color: #f2f2f2"> <col
span="1" style="background-color: #e6e6e6"> <col
span="1" style="background-color: #cccccc"> </colgroup> <thead> <tr> <th
style="font-style: italic; color: red;">Name</th> <th
style="font-style: italic; color: red;">Age</th> <th
style="font-style: italic; color: red;">Grade</th> </tr> </thead> <tbody> <tr>
<td>John Doe</td>
<td>18</td>
<td>A</td> </tr> <tr>
<td>Jane Smith</td>
<td>19</td>
<td>B</td> </tr> <tr>
<td>Emily Johnson</td>
<td>17</td>
<td>A</td> </tr> <tr>
<td>Michael Brown</td>
<td>18</td>
<td>C</td> </tr> </tbody> <tfoot> <tr> <td
colspan="3">End of the table</td> </tr> </tfoot> </table> </body> </html> |
Output:
.png)
- <table border="1">: Creates a table with a border.
- <caption>Student Grades</caption>: Adds a title to the table.
- <colgroup>: Groups columns for formatting.
- <col>: Applies background colors to columns.
- <thead>: Groups the header row.
- <tr>: Defines a row.
- <th>: Defines header cells with italic and red text.
- <tbody>: Groups the body rows.
- <td>: Defines standard cells with data.
- <tfoot>: Groups the footer row.
- <td colspan="3">: A cell that spans three columns in the footer.
Table Attributes:
Global Attribute are :
1. class:
Purpose: Used to apply CSS styles to the table by referencing the class name in a CSS file.
Example: <table class="myTable">
CSS Usage: .myTable { border: 1px solid black; }
2. id:
Purpose: Provides a unique identifier for the table, useful for JavaScript manipulation and CSS styling.
Example: <table id="mainTable">
CSS Usage: #mainTable { width: 100%; }
3. style:
Purpose: Allows for inline CSS styles directly within the HTML tag.
Example: <table style="border: 1px solid black;">
4. title:
Purpose: Provides additional information about the table, which is often shown as a tooltip when the user hovers over the table.
Example: <table title="Sales Data Table">
Specific Attributes are :
These are specific to the <table> element, though some are deprecated in HTML5:
1. border:
Purpose: Defines the width of the border around the table.
Example: <table border="1"> (Deprecated)
Modern Usage: Use CSS: table { border: 1px solid black; }
2. cellpadding:
Purpose: Specifies the space between the cell content and its border.
Example: <table cellpadding="10"> (Deprecated)
Modern Usage: Use CSS: td { padding: 10px; }
3. cellspacing:
Purpose: Specifies the space between cells.
Example: <table cellspacing="5"> (Deprecated)
Modern Usage: Use CSS: table { border-spacing: 5px; }
4. summary:
Purpose: Provides a summary of the table's content for accessibility purposes, especially useful for screen readers.
Example: <table summary="This table lists the sales data by quarter."> (Deprecated)
Modern Usage: Provide descriptive text through HTML elements such as captions or use ARIA attributes for accessibility.
5. width:
Purpose: Sets the width of the table.
Example: <table width="100%"> (Deprecated)
Modern Usage: Use CSS: table { width: 100%; }
6. height:
Purpose: Sets the height of the table.
Example: <table height="200"> (Deprecated)
Modern Usage: Use CSS: table { height: 200px; }
7. align:
Purpose: Aligns the table to the left, center, or right of the page.
Example: <table align="center"> (Deprecated)
Modern Usage: Use CSS: table { margin: 0 auto; } for center alignment.
8. bgcolor:
Purpose: Sets the background color of the table.
Example: <table bgcolor="#f0f0f0"> (Deprecated)
Modern Usage: Use CSS: table { background-color: #f0f0f0; }
Example:
Output:
.png)
Creating Lists:
HTML lists allow web developers to group a set of related items in lists.There are 3 types of Lists:
Ordered Lists
Unordered Lists
Description Lists
Ordered List (<ol>):
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Unordered List (<ul>):
An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
description lists<dl>:
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Output:
.png)
Ordered List (<ol>):
Use the <ol> tag to create a numbered list.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>A Ordered List</h2>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</body>
</html>
.png)
Unordered List (<ul>):
Use the <ul> tag to create a bulleted list.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>A Unordered List</h2>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
</body>
</html>
.png)
List Items (<li>):
The <li> tag is used inside <ol> (ordered) or <ul> (unordered) to define each list item.
Outcome:
By completing this lab, you will understand how to create tables and lists in HTML to organize and present information effectively. Tables are useful for displaying structured data, while lists are handy for presenting information in a structured and easy-to-read format. This knowledge is essential for creating well-structured web pages.
Lab Exercise: Tables and Lists in HTML
Objective:
To practice creating tables and lists using HTML tags.
Instructions:
Create a new file named tables_and_lists.html using a text editor (e.g., Notepad, Visual Studio Code, Sublime Text).
Build the basic structure of your HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tables and Lists in HTML</title>
<style>
/* Optional: CSS styles for additional formatting */
.table-container {
margin-top: 20px;
margin-bottom: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
</style>
</head>
<body>
<h1>Tables and Lists Examples</h1>
<div class="table-container">
<h2>Basic Table</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</table>
</div>
<div>
<h2>Unordered List</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div>
<h2>Ordered List</h2>
<ol>
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
</ol>
</div>
</body>
</html>
Save the file and open it in a web browser to view your web page (tables_and_lists.html).
Detailed Explanation:
HTML Structure:
- <table>: Defines a table structure in HTML.
- <tr>: Represents a row within the table.
- <th>: Defines a header cell in a table (for table headers).
- <td>: Defines a standard cell in a table (for table data).
- <ul> (Unordered List): Defines an unordered list (bulleted list).
- <ol> (Ordered List): Defines an ordered list (numbered list).
CSS Styling (Optional):
The <style> section in the <head> allows you to define CSS styles for custom formatting:
- .table-container: Adds spacing around the table for better readability.
- table: Sets the table width to 100% of its container and collapses table borders (border-collapse: collapse;).
- th, td: Styles table header (<th>) and table data (<td>) cells with borders, padding, and left-aligned text (text-align: left;).
- ul: Sets list items (<li>) in unordered lists to use disc (bullet) markers (list-style-type: disc;).
- ol: Sets list items (<li>) in ordered lists to use decimal numbers (list-style-type: decimal;).
Tasks:
Enhance your page by:
- Adding more rows and columns to the <table> structure with different content (e.g., names, ages, cities).
- Experimenting with additional CSS styles to customize the appearance of tables and lists (e.g., changing colors, fonts, spacing).
Practice using lists:
Combine lists (<ul>, <ol>) with table content to organize information effectively.
Outcome:
By completing this lab exercise, you will have practiced creating and styling tables (<table>, <tr>, <th>, <td>) and lists (<ul>, <ol>, <li>) in HTML. This exercise helps you understand how to structure tabular and list-based data on web pages, enhancing content organization and visual presentation.
.png)