This is the next part of previous tutorial about table Table tutorial with xhtml part 1

Now time to explain TD and TR Still remember with this table?

Now I put number and letter combination at the table Cell. NUMBER is TD and LETTER is TR.

TR is horizontal part.

TD is vertical part

Remember, in table, we must TR at the first before we put TD.

Now, we want to make table like this

How to  combine Coloumn name COLspan. And if you want to combine Row named ROWspan. Easy right?

Method :

Pick which colom that you want to combine. Pick the right and the upper side of the line. Put colrowspan code on the TD and remove another TD.

See this

<table width=”398″ height=”234″ border=”1″ align=”center” bordercolor=”#FF0000″ cellpadding=”2″ cellspacing=”3″>

<tr>

<td colspan=”3″ bgcolor=”#00FF00″> <!– Ini untuk menggabungkan 1A 2 A dan 3 A. Lihat kan kalau TD yg tadinya ada, jd lenyap dan ditaruh di antara TD dr kolom pertama–>

<font color=”#000000″ face=”Verdana” Size=”3″> 1 </font> <font color=”#FFFFFF” face=”Verdana” Size=”3″> 2 </font> <font color=”#FFFFFF” face=”Verdana” Size=”3″> 3 </font>

</td>

</tr> <tr>

<td width=”113″ rowspan=”2″> <!– Ini untuk menggabungkan 1B dan 1C. –>

<font color=”#FFFFFF” face=”Verdana” Size=”3″> 4 </font> <font color=”#FFFFFF” face=”Verdana” Size=”3″> 7 </font>

</td>

<td width=”153″> <font color=”#FFFFFF” face=”Verdana” Size=”3″> 5 </font> </td> <td width=”100″> <font color=”#FFFFFF” face=”Verdana” Size=”3″> 6 </font> </td> </tr> <tr> <td> <font color=”#FFFFFF” face=”Verdana” Size=”3″> 8 </font> </td> <td> <font color=”#FFFFFF” face=”Verdana” Size=”3″> 9 </font> </td> </tr>

</table>

If you still have question, pls feel free to ask

Be Sociable, Share!

• 

Tags: colspan, rowspan, Table, Tutorial, XHTML —