You already know how to create a basic table with rows and columns. Now, let's move beyond the simple grid. HTML provides several attributes to control the structure, spacing, and appearance of your tables, which are crucial for organising complex data clearly. These are older, presentation-focused attributes, but they are essential for the CBSE curriculum.

Four key attributes of the <table> tag allow you to fine-tune its overall layout. The border attribute sets the thickness of the outer border and the lines between cells. A value of "0" hides them completely, while a higher number makes them thicker.

The width attribute controls the table's size, which can be a fixed number of pixels (like width="400") or a percentage of the available screen space (like width="80%"). Using percentages helps your table adapt to different screen sizes.

Next are cellpadding and cellspacing. They both manage space, but in different ways. cellpadding controls the margin inside each cell, pushing the content away from the cell's border. Think of it as padding within a box.

cellspacing controls the distance between the cells themselves. Increasing this value creates wider gaps in your table's grid. Think of it as the thickness of the grid lines separating the boxes.

Here is how these attributes look together in a single <table> tag.

Standard tables have a regular grid structure, but sometimes you need a single cell to span across several columns or rows. This is common for creating headers or grouping related data. HTML uses two attributes for this: colspan and rowspan.

The colspan attribute, short for 'column span', is added to a <td> or <th> tag. The value you give it determines how many columns that cell should occupy. For example, colspan="3" makes a single cell take up the space of three normal cells in that row.

When you use colspan, remember to reduce the number of <td> or <th> tags in that specific <tr>. If one cell now spans three columns, you need two fewer cells in that row to complete the grid.

Similarly, the rowspan attribute lets a cell extend downwards across multiple rows. If you set rowspan="2" on a cell in the first row, that cell will occupy its own space plus the space of the cell directly below it in the second row.

When using rowspan, you must omit the corresponding <td> or <th> tag from the subsequent row(s) that the spanning cell covers. This prevents the table layout from breaking.

You can also control where the content appears within a cell. The align attribute handles horizontal alignment and can be set to left, center, or right.

The valign attribute manages vertical alignment. Its common values are top, middle, and bottom. These attributes can be applied to an entire row (<tr>) or to individual cells (<td>, <th>).

To change the background colour, you can use the bgcolor attribute. This can be applied to the whole <table>, a single <tr>, or an individual <td> or <th> to highlight specific data points.

These advanced table attributes give you precise control over data presentation, a key skill for your board examinations. Now, let's test your understanding.