HTML Tables
HTML tables are used to display data in a tabular format. They consist of rows and columns where data can be organized neatly. It’s like a virtual spreadsheet where you can put text, images, or other content into different cells to make it easy to read and understand.
Basic Structure of HTML Tables:
HTML tables are structured using a combination of tags to define rows, columns, and data within the table.
1. <table> Tag: The <table> tag is used to define the beginning and end of the table.
2. <tr> Tag:
⦁ The <tr> tag is used to define a row within the table.
⦁ Each row starts with <tr> and ends with </tr>.
3. <th> and <td> Tags:
⦁ Within each row (<tr>), you define cells using either <th> for header cells or <td> for data cells.
⦁ <th> is used for headers, such as column headings or row headings. Renders text in bold and centered by default.
⦁ <td> is used for standard data cells.
Example:
Output:
In this example:
⦁ We have a table with two columns and two rows.
⦁ The first row contains headers (“Header 1” and “Header 2”).
⦁ The second row contains data (“Data 1” and “Data 2”).
Table Borders and Styling
You can style your table using CSS to make it visually appealing. For example, you can add borders, change cell padding, and alter text alignment.
Example:
Output:
In this example:
⦁ The <head> section includes CSS for styling.
⦁ The table selector applies styles to the table, ensuring borders collapse into a single border and setting the table width to 100%.
⦁ The th, td selectors style the header and data cells, giving them borders, padding, and left alignment.
⦁ The th selector adds a background color to header cells for differentiation.
Spanning Rows and Columns
You can merge cells to create more complex layouts using the rowspan and colspan attributes.
Example:
Here’s an example of using the rowspan and colspan attributes to span rows and columns in an HTML table:
Output:
In this example:
1. Basic Table Structure:
⦁ The table starts and ends with the <table> tag.
⦁ CSS is used to style the table for better readability, with borders, padding, and left-aligned text.
2. Spanning Columns with colspan:
⦁ In the first row (<tr>), the single cell (<td colspan=”2″>Header Cell spanning two columns </td>) spans across two columns. This is useful for creating headers or titles that need to cover multiple columns.
3. Regular Table Row:
⦁ The second row has two standard data cells (<td>Row 1, Cell 1</td> and <td>Row 1, Cell 2</td>).
4. Spanning Rows with rowspan:
⦁ In the third row, the first cell (<td rowspan=”4″>Row 2, Cell 1 spanning four rows</td>) spans two rows. This cell will extend into the four rows.
⦁ The second cell in the third row is a regular data cell (<td>Row 2, Cell 2</td>).
5. Continuation of the Row-Spanning Cell:
⦁ The fourth and fifth row contains the second cell (<td>Row 3, Cell 2</td>) (<td>Row 4, Cell 2</td>) which aligns with the cell that spans from the third row.
HTML Table Tags
Here’s a list of HTML table tags
| Tag | Description |
|---|---|
| <table> | Defines the beginning and end of a table. |
| <tr> | Defines a row within the table. |
| <th> | – Defines a header cell within a table row. Typically used for column or row headings. – Renders text in bold and centered by default. |
| <td> | – Defines a standard data cell within a table row. – Contains data or content to be displayed in the table. |
| <caption> | – Defines a caption for the table. This tag is placed immediately after the <table> tag and before the first <tr> tags – Provides a title or description for the table content. |
| <thead> | – Defines the header section of the table. – Typically contains one or more <tr> elements that represent header rows. |
| <tbody> | – Defines the body section of the table. – Contains the main content or data rows of the table. |
| <tfoot> | – Defines the footer section of the table. – Contains summary or footer rows for the table. |
Here’s an example of the use of all the common HTML table tags together:
Output:
In this example:
⦁ The <table> tag defines the beginning and end of the table.
⦁ The <caption> tag provides a title for the table.
⦁ The <thead>, <tbody>, and <tfoot> tags define the header, body, and footer sections of the table, respectively.
⦁ Inside the <thead>, a row (<tr>) contains header cells (<th>) for “Expense” and “Amount ($)”. These represent the column headings.
⦁ Inside the <tbody>, each row contains data cells (<td>) representing individual expenses and their respective amounts.
⦁ Inside the <tfoot>, a row contains summary information, in this case, the total expense.
⦁ CSS is used to style the table, including borders, padding, background color for header cells, and making the table responsive.
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Basic Table
Objective: Create a basic table with 3 rows and 3 columns.
Expected Output: A webpage with a table displaying three rows and three columns of data.
Output:
Scenario 2: Creating a Table
Objective: Create a table with a heading, column headers, and some data.
Expected Output:
⦁ A heading saying “Employee Data”.
⦁ A table with three columns: Name, Position, and Age.
⦁ Three rows of data for employees.
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<h1>Employee Data</h1>
<table border=”1″>
<tr>
<th>Name</th>
<th>Position</th>
<th>Age</th>
</tr>
<tr>
<td>John Doe</td>
<td>Manager</td>
<td>30</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Developer</td>
<td>25</td>
</tr>
<tr>
<td>Mike Johnson</td>
<td>Designer</td>
<td>28</td>
</tr>
</table>
</body>
</html>
Output:
Scenario 3: Table with Caption
Objective: Create a table with a caption above it.
Expected Output: A webpage with a table that has a caption titled “Monthly Sales”.
Output:
Scenario 4: Table with Merged Cells
Objective: Create a table where some cells span multiple rows or columns.
Expected Output: A webpage with a table displaying merged cells.
<html>
<head>
<title>Table with Merged Cells</title>
</head>
<body>
<h1>Table with Merged Cells</h1>
<table border=”1″>
<tr>
<th>Header 1</th>
<th colspan=”2″>Header 2 and 3</th>
</tr>
<tr>
<td rowspan=”2″>Row 1 and 2, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
</body>
</html>
Output:
Scenario 5: Styled Table with CSS
Objective: Create a table with custom CSS styles for better visual appeal.
Expected Output: A webpage with a styled table.
<!DOCTYPE html>
<html>
<head>
<title>Styled Table</title>
<style>
table {
width: 50%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>Styled Table</h1>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
<td>Row 3, Cell 3</td>
</tr>
</table>
</body>
</html>
Output:
Scenario 6: Table with Multiple Headers
Objective: Create a table with multiple header rows.
Expected Output: A webpage with a table having multiple header rows.
Output:
