Spanning Rows and Columns Mrs Wilson Internet Basics

Spanning Rows and Columns Mrs. Wilson Internet Basics & Beyond

Review n Cell padding ¨ The n Cell spacing ¨ The n n space WITHIN the cells space BETWEEN the cells The <th> tag will make the text in a cell centered and bold There are two types of tables: ¨ Graphical & Text

Review n n The color defined for a cell <td bgcolor=“”> overrides the background color of a table or <table bgcolor=“”> By default, tables display text WITHOUT borders. You must add a border=# tag Each row of a table is surrounded by a two-sided <tr> tag Within a table row, a two-sided <td> tag indicates the presence of individual table cells.

You can create…. n Cells that span one or more columns or rows in a table

Spanning Cell n A cell that occupies more than one row or column in a table Spans 3 columns Spans 2 cols & 2 rows Political Party Today’s Opinion Poll Question Democrat “Do you favor or oppose increasing the minimum wage? ” Spans 3 rows Republican Independent Favor 70% 35% 55% Oppose 25% 60% 30% Unsure 5% 5% 15%

ROWSPAN & COLSPAN n You can create spanning cells by inserting the ROWSPAN & COLSPAN properties in the <td> and <th> tags <td rowspan=value colspan=value>text</td> n Value is the number of rows or columns the cell will span

Example You would enter <td colspan=2> tag to create a cell that spans two columns in a table n You would enter <td rowspan=2> for a cell that spans two rows n

Type this HTML code <table border=2> <tr> <td rowspan=3>This cell spans 3 rows</td> <td>one</td> <td>two</td> <td>three</td> <td>four</td> </tr> <td>five</td> <td>six</td> <td>seven</td> </tr> <td>eight</td> <td>nine</td> <td>ten</td> </tr> </table>