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.
what is concept of Cellpadding and Cellspacing exactly??
ReplyDeleteAs 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.
DeleteOh my mistake!
DeleteI read your question wrong.
Cellspacing: The space between two cells.
Cellpadding: The space between the content of the cell and cell borders.
More detailed about html tables...Html Table tutorial
Deleteling
nothing new
ReplyDeleteA detailed html table tutorial......Html Tables
ReplyDeleteling
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
ReplyDeletewhen will u give me reply??
DeleteNice information . Thanks for the example with code.
ReplyDeleteThanks and I have a neat offer you: Full House Reno split level home additions
ReplyDelete