Sometimes you need to join two cells in a row to each other. For example in a 2*3 table we may want to join two cells with each other . In this way we will have two cells in first row and three cells in second row. Enter this html code in a file and browse it in your browser to see what is column span.
Example:
<HTML>
<HEAD>
<TITLE>Example</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>A</TD>
<TD>B</TD>
</TR>
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Just be careful that when you have for example 2 cells in first row and first one uses column span parameter COLSPAN=2 it means that it is equal to two cells. Therefore you must have three cells in next row (three <TR> tags) or you may use COLSPAN to create cells that when you add them, it will be equal to previous row or 3 in this example.
Row Span
This time we want to join two cells in a column (from different rows). This is the same as previous section with the difference that we will join cells from different rows rather than cells in different columns. This time we must use ROWSPAN instead of COLSPAN.
Example:
<HTML>
<HEAD>
<TITLE>Example</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=”1″ WIDTH=”200″>
<TR>
<TD ROWSPAN=”2″>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
<TR>
<TD>D</TD>
<TD>E</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Again you must be careful that when you have for example a cell in first column that you have joined two cells to create it using the option ROWSPAN=2 then your table must have two rows and you must take this in mind in next parts of your table. In above example we only entered two cells in second row (started from second <TR> ) as first cell of first row has occupied first cell of this row too and we have only two cells left of 3 cells. Enter this example and browse it to see the results.
You may want to mix these tags to create your custom tables however this is a complicated task and you must work hard to gain needed experience with these tables.
Post a Comment