Lecture Notes On Class 9: 

Advanced Table Techniques

Objective:

Learn advanced techniques for styling and managing table layouts.

Outcome:

Students will be able to merge table cells using colspan and rowspan, and apply styling to tables for improved visual presentation.

---

1. Merging Cells in Tables

1.1 colspan Attribute

• Purpose: Allows a table cell to span across multiple columns.
• Usage: Add the colspan attribute to a <td> or <th> element to specify how many columns the cell should cover.
• Example:

<table border="1"> <tr> <th colspan="2">Header spanning 2 columns</th> </tr> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table> In this example, the header cell spans two columns. 1.2 rowspan Attribute Purpose: Allows a table cell to span across multiple rows. Usage: Add the rowspan attribute to a <td> or <th> element to specify how many rows the cell should cover. Example: <table border="1"> <tr> <th rowspan="2">Header spanning 2 rows</th> <td>Cell 1</td> </tr> <tr> <td>Cell 2</td> </tr> </table>

 

• In this example, the header cell spans two rows.

---

2. Styling Tables

2.1 Basic Table Styling with CSS

• Purpose: Enhance the visual appearance of tables using CSS.
• Common Properties:
• border: Defines the border around the table and cells.
• border-collapse: Determines whether cell borders are collapsed into a single border.
• padding: Adds space inside table cells.
• text-align: Aligns text within table cells.
• background-color: Sets the background color of cells.
• Example:

<style>   table {     width: 100%;     border-collapse: collapse;   }   th, td {     border: 1px solid black;     padding: 8px;     text-align: left;   }   th {     background-color: #f2f2f2;   }   tr:nth-child(even) {     background-color: #f9f9f9;   } </style> <table>   <tr>     <th>Header 1</th>     <th>Header 2</th>   </tr>   <tr>     <td>Data 1</td>     <td>Data 2</td>   </tr>   <tr>     <td>Data 3</td>     <td>Data 4</td>   </tr> </table>

 

• In this example, the table has a full width, borders are collapsed, and alternating row colors are applied.

2.2 Advanced Styling Techniques

• Alternating Row Colors: Use nth-child pseudo-class to style odd and even rows differently.
• Hover Effects: Apply styles when a user hovers over a row or cell.
• Responsive Tables: Ensure tables are responsive on different screen sizes by using CSS properties like max-width and overflow-x.

---

Summary

• Use colspan and rowspan attributes to merge cells and control the layout of your table.
• Apply CSS for advanced styling to enhance the table's appearance and usability.
• Experiment with various CSS properties to create visually appealing and functional tables.