Detailed Notes: Introduction to Tables in
HTML
What are HTML Tables?
Definition: HTML tables are used to display data in a structured format of rows and
columns.
Purpose: Commonly used for presenting information such as schedules, comparisons,
and statistical data.
Basic Structure of HTML Tables
Key Tags:
1. <table>: Defines the entire table.
2. <tr>: Defines a table row.
3. <th>: Defines a header cell (bold and centered by default).
4. <td>: Defines a standard cell for data.
Example:
html
Copy
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>Developer</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Designer</td>
</tr>
</table>
Creating a Simple Table
Hands-on Activity:
Task: Each student creates a table with:
o 3 rows (1 header + 2 data rows)
o 3 columns (Name, Age, Occupation)
Data Example: Use fictitious names, ages, and occupations.
Adding Attributes
Common Attributes:
border: Adds a border around the table.
cellpadding: Adds space within cells.
cellspacing: Adds space between cells.
caption: Provides a title for the table, improving accessibility.
Example with Attributes:
html
Copy
<table border="1" cellpadding="5" cellspacing="0">
<caption>Employee Information</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
...
</table>
Advanced Table Features
Colspan and Rowspan:
colspan: Merges multiple columns into one cell.
rowspan: Merges multiple rows into one cell.
Example:
html
Copy
<table border="1">
<tr>
<th colspan="2">Personal Information</th>
<th>Occupation</th>
</tr>
<tr>
<td rowspan="2">John Doe</td>
<td>30</td>
<td>Developer</td>
</tr>
<tr>
<td>31</td>
<td>Designer</td>
</tr>
</table>
Conclusion
Recap of key concepts: table structure, attributes, colspan, and rowspan.
Importance of tables in web design for organizing data effectively.
Homework Assignment
Create a table with at least 5 rows and 4 columns.
Include at least one instance of colspan and rowspan.
Apply styling to enhance the table’s appearance.
ML Tables
Structure of an HTML Table
1. Table Element: Use <table> to define a table.
2. Table Header: Use <thead>, <tr>, and <th> for the header.
o <thead>: Groups header content.
o <tr>: Defines a table row.
o <th>: Defines a header cell (bold and centered by default).
3. Table Body: Use <tbody> and <td> for the body.
o <tbody>: Groups the body content.
o <td>: Defines a standard cell.
4. Table Footer: Use <tfoot> for the footer.
o <tfoot>: Groups footer content.
Example
html
Copy
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total: 2</td>
</tr>
</tfoot>
</table>
CSS Borders
Adding Borders to Tables
1. Table Borders: Use the border property.
2. Cell Borders: Use border-collapse for merging borders.
Example CSS
css
Copy
table {
border-collapse: collapse; /* Merges borders */
width: 100%; /* Full width */
}
th, td {
border: 1px solid black; /* Defines border for cells */
padding: 8px; /* Space inside cells */
text-align: left; /* Align text */
}
th {
background-color: #f2f2f2; /* Header background */
}
Border Styles
Solid: border: 1px solid black;
Dashed: border: 1px dashed black;
Dotted: border: 1px dotted black;
Double: border: 3px double black;
Responsive Tables
To make tables responsive, consider using CSS media queries or a container with overflow-x:
css
Copy
.table-responsive {
overflow-x: auto; /* Enable horizontal scrolling */
}
Summary
Use HTML elements to structure tables with headers, body, and footers.
Apply CSS for styling borders and making tables visually appealing.
