Colspan

Lesson 8

 


Here is the code that we left of with in the last lesson

<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

Lets colspan cells 8 and 9 now

Remember how to do it?

ok I'll refresh your memory if you don't.

Step 1 figure out what the new width that your spanned column will be

Cell 8 is currently set at 33%

Cell 9 is currently set at 34%

33 + 34 = 67

GOT IT!

the new width of our spanned cell will be 67%

 

<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=67%>8</td>
<td align=center width=34%>9</td>
</tr>
</table>

The next step is to delete the line in your code for the current 9 cell as it will be spanned with your 8 cell.

<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=67%>8</td>

</tr>
</table>

Last step, Add the colspan=2 statement to tell your browser that 2 columns have been spanned.

<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=67% colspan=2>8</td>

</tr>
</table>

1 3
4 5 6
7 8

GREAT!

If your table looks like this, kiss yourself on the back of your back and go to the next lesson.