Colspan

Lesson 7

 


Here is the code that we finished the last lesson with.

<table align=center border=1 width=90% background=html/backgroundlight.jpg>
<tr>
<td align=center width=33%>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>

1 2 3
4 5 6
7 8 9

Lets do some work with colspan

Colspan = Column span which means to combine 2 or more columns

Take a look at the table above. We will combine cells 1 and 2 and make them a single cell that are currently separated into two cells.

The first thing we need to do is figure out the width that our new cell will have.

well cell 1 is set at 33%

and cell 2 is also 33%

33 + 33 = 66

Ok so we now know that the new cell will be set at 66%

Please locate the code for your 1 cell and change the width to 66%

<table align=center border=1 width=90% background=html/backgroundlight.jpg>
<tr>
<td align=center width=66%>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 that our 1 cell is changed we need to delete the code for the 2 cell as the new cell 1 will now occupy the width of both 1 and 2

<table align=center border=1 width=90% background=html/backgroundlight.jpg>
<tr>
<td align=center width=66%>1</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>

One more thing that we need to do. In our 1 cell, we need to inform the browser that the 1 cell has been spanned to occupy the width of two of the other cells. We do this by adding a statement to our 1 cell. The statement is colspan=2

That means the 2 columns have been spanned (combined)

<table align=center border=1 width=90% background=html/backgroundlight.jpg>
<tr>
<td align=center width=66% colspan=2>1</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>

1 3
4 5 6
7 8 9

You did it! You did it!

ok on to the next lesson.