Tuesday, February 22, 2011

Colspan & Rowspan with HTML Table

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.

9 comments:

  1. what is concept of Cellpadding and Cellspacing exactly??

    ReplyDelete
    Replies
    1. As you can see the tables will always have a cell that must span across multiple rows or columns because its a heading or common information etc. To do this we use colspan or rowspan.

      Delete
    2. Oh my mistake!
      I read your question wrong.
      Cellspacing: The space between two cells.
      Cellpadding: The space between the content of the cell and cell borders.

      Delete
  2. A detailed html table tutorial......Html Tables

    ling

    ReplyDelete
  3. its Good..what If we have English With link..when i open English link another table must open with that subject details like image,teacher name,room no etc

    ReplyDelete
  4. Nice information . Thanks for the example with code.

    ReplyDelete

Please leave a comment if you have anything to say or have something to ask.. I will do my best to answer..