Rowspan

Lesson 10

 


Build yourself a 9 cell table again (you may want to peek at lesson 7 to refresh your memory, but come right back to lesson 10 again)

1 2 3
4 5 6
7 8 9


Rowspan is very similar to colspan but this time we'll be spanning down instead of across.

Lets span cells 1 and 4

There is no need for a width statement when row spanning.

locate the code for your 1 cell. Remove the width statement and REPLACE it with your rowspan statement.

<table align="center" border="1" width="90%" background="backgroundlight.jpg">
<tr>
<td align=center rowspan=2>1</td>
<td align=center width=33%>2</td>
<td align=center width=34%>3</td>
</tr>
<tr>
<td align=center width=33%>4</td>
<td align=center width=33%>5</td>
<td align=center width=34%>6</td>
</tr>
<tr>
<td align=center width=33%>7</td>
<td align=center width=33%>8</td>
<td align=center width=34%>9</td>
</tr>

</table>

Now, just like we did in colspan, we have to delete the code for the row that the 1 cell will be spanned with. In this case it is the 4 cell

<table align="center" border="1" width="90%" background="backgroundlight.jpg">
<tr>
<td align=center rowspan=2>1</td>
<td align=center width=33%>2</td>
<td align=center width=34%>3</td>
</tr>
<tr>

<td align=center width=33%>5</td>
<td align=center width=34%>6</td>
</tr>
<tr>
<td align=center width=33%>7</td>
<td align=center width=33%>8</td>
<td align=center width=34%>9</td>
</tr>

</table>

1 2 3
5 6
7 8 9

WAY TA GO!

OK lets see if you can span cells 6 and 9 all by yourself.

1 2 3
5 6
7 8

Did ya do it?

GREAT. This is the last lesson on tables.

MUAAAH!