My HTML Way...: Colspan $ Rowspan

This should be interesting.
Once you have a table in your web page often you will require columns or rows that span across the table. For example, lets design a table that looks like:

First thing we need to know is how to span. Lets take a small example:

<HTML>
 <BODY>
  <TABLE Border = "1" Cellpadding = "5" Cellspacing = "5">
   <TR>
    <TD Colspan = "2" Align = "Center">Time Table</TH>
   </TR>
   <TR>
    <TD>Column 1</TD><TD>Column 2</TD>
   </TR>
  </TABLE>
 </BODY>
</HTML>

Web Page:

Notice the attribute "Colspan". We use this attribute to span once cell across many columns, in this case span across 2 columns. Spanning always works from Left to right (Colspan) and Top to bottom (Rowspan). We will see this later. In the example you can see that one cell is missing in the first row. Thats is right, when we want to colspan, the row that contains the cell that will span will have less number of cells (depends on how many column we are spanning), to be precise its

TotalCells = ActualNumberofCells - (SpanningNumber - 1)

Now lets take an example of Rowspan:

<HTML>
 <BODY>
  <TABLE Border = "1" Cellpadding = "5" Cellspacing = "5">
   <TR>
    <TD RowSpan = "2">Hours</TH><TD>Row 1</TH>
   </TR>
   <TR>
    <TD>Tow 2</TD>
   </TR>
  </TABLE>
 </BODY>
</HTML>

Web Page:

Here in the above example you can see that the second row contains only one cell (column 2) because we are spanning the first column, first cell by 2 rows. Recall that it spans only downwards. If you had two cells in the second row and only one in the first, and tried to rowspan the second row first column it would not work.

Now lets combine them and write the HTML code for our time table.

<HTML>
 <BODY>
  <Font Face = "Verdana">
  <TABLE style="border-collapse: collapse;" Border = "1" Cellpadding = "5" Cellspacing = "5">
   <TR>
    <TH Colspan = "6" Align = "center">Time Table</TH>
   </TR>
   <TR>
    <TH Rowspan = "6">Hours</TH>
    <TH>Mon</TH>
    <TH>Tue</TH>
    <TH>Wed</TH>
    <TH>Thu</TH>
    <TH>Fri</TH>
   </TR>
   <TR>
    <TD>Science</TD
    ><TD>Maths</TD>
    <TD>Science</TD>
    <TD>Maths</TD>
    <TD>Arts</TD>
   </TR>
   <TR>
    <TD>Social</TD>
    <TD>History</TD>
    <TD>English</TD>
    <TD>Social</TD>
    <TD>Sports</TD>
   </TR>
   <TR>
    <TH Colspan = "5" Align = "center">Lunch</TH>
   </TR>
   <TR>
    <TD>Science</TD>
    <TD>Maths</TD>
    <TD>Science</TD>
    <TD>Maths</TD>
    <TD Rowspan = "2">Project</TD>
   </TR>
   <TR>
    <TD>Social</TD>
    <TD>History</TD>
    <TD>English</TD>
    <TD>Social</TD>
   </TR>
  </TABLE>
  </Font>
 </BODY>
</HTML>

WebPage:

Notice how cells inside the table like "Lunch" and "Project" are also spanned. I have also added some effects like collapsing the table border and aligning the cell content.

My HTML Way...

Tuesday, February 22, 2011

Colspan & Rowspan with HTML Table