Module 8: Tables in HTML
This module focuses on how to create and style tables in HTML, use table attributes effectively, and practice these skills with practical examples and exercises.
1. Introduction to HTML Tables
HTML tables allow you to organize and display data in a tabular format using rows and columns. They are created using the following tags:
<table>: Defines the table container.
<tr>: Defines a table row.
<td>: Defines a table cell (data).
<th>: Defines a table header cell.
2. Basic Table Structure
Here’s a simple example of a table:
html code
<!DOCTYPE html> <html> <head> <title>Basic Table</title> </head> <body> <table border="1"> <tr> <th>Item</th> <th>Price</th> <th>Quantity</th> </tr> <tr> <td>Apple</td> <td>$1</td> <td>10</td> </tr> <tr> <td>Banana</td> <td>$0.5</td> <td>20</td> </tr> </table> </body> </html>
Explanation:
<table border="1">: Adds a border to the table.
<tr>: Creates a new row.
<th>: Creates a header cell (bold and centered by default).
<td>: Creates a regular cell.
3. Table Attributes
3.1 Borders
Add or remove table borders using the border attribute.
Example:
html code
<table border="2"> ... </table>
3.2 Width
Control table or cell width using the width attribute.
Example:
html code
<table width="50%"> ... </table>
3.3 colspan (Merging Columns)
Used to merge cells across multiple columns.
Example:
html code
<tr> <th colspan="2">Product Details</th> </tr> <tr> <td>Item</td> <td>Price</td> </tr>
3.4 rowspan (Merging Rows)
Used to merge cells across multiple rows.
Example:
html code
<tr> <td rowspan="2">Fruits</td> <td>Apple</td> </tr> <tr> <td>Banana</td> </tr>
4. Adding Style with CSS
You can style tables using inline CSS or external CSS.
Example:
html code
<style> table { border-collapse: collapse; width: 80%; margin: 20px auto; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } </style>
5. Practical Example: Styled Table
html code
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 70%; margin: 20px auto; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { background-color: #4CAF50; color: white; } tr:nth-child(even) { background-color: #f2f2f2; } </style> </head> <body> <table> <tr> <th>Product</th> <th>Price</th> <th>Stock</th> </tr> <tr> <td>Apple</td> <td>$1</td> <td>50</td> </tr> <tr> <td>Banana</td> <td>$0.5</td> <td>100</td> </tr> <tr> <td>Cherry</td> <td>$2</td> <td>30</td> </tr> </table> </body> </html>
6. Exercises
Exercise 1: Create a Table
Create a table to display student scores with the following columns: Name, Subject, and Score.
Exercise 2: Add Attributes
Modify the table to include:
A border
colspan for a merged "Header" row
Styled header row with background color.
Description
A center-aligned table with a header row, alternating row colors, and proper column and row labels, styled with borders and spacing.
No comments:
Post a Comment