Two attributes “rowspan” and “colspan” are used to combine adjoining cells into larger cells. These attributes are used in either <TH> or <TD> tags and accepts a number as value. For rowspan attribute this number indicates the number of rows a cell should take up and for colspan the number of columns the cell should span. In both the cases the present cell is included in counting.
You should note that when you are using these attributes, the neighboring cells are not eliminated. They are just concealed and the acquiring cell uses their space. For example, rowspan = 4 indicates that four cells are joined down the row including the current cell. Firstly we will span rows in a table: The layout of the code can be built.
As you see, each of the two cells having contents “Numerical Methods” “ANSI C” are stretched over two rows. So we need to specify rowspan = 2 in the corresponding <TD> tags. The final HTML code is as shown below:
<html> <head> <title> table tags</title> </head> <body> <tableborder=5width="100"height="200" allgn="center"> <trbgcolor="pink"> <th> title of books</th> <th>authors</th> <th>edition1 </th> <th>edition2</th> <th>edition3</th> <th>edition4</th> </tr> <tr> <tdrowspan=2>numerical methods</td> <td>D Thakur</td> <td>1997</td> <td>1999</td> <td>2001 </td> <td>2003</td> </tr> <tr> <td>S Aggarwal</td> <td>1998</td> <td>1999</td> <td>2001 </td> <td>2003</td> </tr> <tr> <tdrowspan=2>ansi c</td> <td>bajrangbali</td> <td>1996</td> <td>1998</td> <td>1999</td> <td>2002</td> </tr> <tr> <td>D Thakur</td> <td>1994</td> <td>1997</td> <td>2000</td> <td>2003</td> </tr> </table> </body> </html>
As the browser encounters rowspan = 2 in a <TD> tag, it comes to a decision that this cell will need the space of two cells vertically and in view of that it provides the space. Then it continues across the row and adds the next five cells and comes back to the next row. Now the first cell of this row has already been filled due to rowspan attribute and so it has only five data cells instead of six.
The same is true for colspan attribute. This attribute spans columns instead of rows. To see how it works, add these lines of code after the opening <TABLE>tag in the previous code.
<tr> <thcolspan=6bgcolor="pink">information about books</th> </tr>These lines introduce a new row at the top of our sample table and have only a single cell. The Colspan=6 is included as we need to span this cell over all the six columns of our sample table.
Specifying Cell Size And Alignment
It’s fine idea to specify how big each cell is. When no instructions are given to the browser, each cell may be of different size depending on the size of the cell contents. Specifying cell sizes avoids wrapping of text and makes the content easier to read.
The size of a cell in a table can be adjusted using the “Width” attribute. The width of a cell is specified as number of pixels or as a percentage of table width. This attribute can be used with <TH> and <TD> tags to adjust the width of cells. The following code will change the width of cells in the first rows as:
<html> <head> <title> table tags</title> </head> <body> <tableborder=5width="100"height="200" allgn="center"> <trbgcolor="pink"> <thwidth=40%> title of books</th> <thwidth=40%> authors</th> <thwidth=40%> edition1 </th> <thwidth=50%> edition2</th> <thwidth=50%> edition3</th> <thwidth=50%> edition4</th> </tr> <tr> <tdrowspan=2>numerical methods</td> <td>D Thakur</td> <td>1997</td> <td>1999</td> <td>2001 </td> <td>2003</td> </tr> <tr> <td>S Aggrawal</td> <td>1998</td> <td>1999</td> <td>2001 </td> <td>2003</td> </tr> <tr> <tdrowspan=2>ansi c</td> <td>bajrangbali</td> <td>1996</td> <td>1998</td> <td>1999</td> <td>2002</td> </tr> <tr> <td>D Thakur</td> <td>1994</td> <td>1997</td> <td>2000</td> <td>2003</td> </tr> </table> </body> </html>
Not only the size of a cell can be adjusted but we can even control where in the cell the data and other contents will appear. This can be done by setting the alignment of data within the cell. The cell contents can be aligned either horizontally or vertically. The horizontal alignment can be set to left, right, center and vertically alignment to top, middle, bottom.
There are mainly two attributes It align” and “valign” for specifying horizontal and vertical cell alignments. By default the table contents are aligned (left, middle) and the table headings are aligned (center, middle) in the cell. You can specify these alignments for a row or for a cell.
When used with <TR>tag, the values specified in these attributes will be applicable to all the cells in that particular row. But if a <TD> or <TH> cell in that row has its own specific alignments, then these alignments will override the earlier alignments in the <TR>tag. The following code shows the use of these attributes in a table as:
<html> <head> <title>table tags</title> </head> <body> <tableborder=5width="100"height="200" allgn="center"> <tr bgcolor="pink"> <th width=170%> title of books</th> <thwidth=89%> authors</th> <thwidth=170%> edition1 </th> <thwidth=28%> edition2</th> <thwidth=156%> edition3</th> <thwidth=156%> edition4</th> </tr> <tr> <tdrowspan=2>numerical methods</td> <td>D Thakur</td> <td>1997</td> <td>1999</td> <td>2001 </td> <td>2003</td> </tr> <tr> <td>S Aggarwal</td> <td>1998</td> <td>1999</td> <td>2001 </td> <td>2003</td> </tr> <tr> <tdrowspan=2>ansi c</td> <td>Bajrangbali</td> <td>1996</td> <td>1998</td> <td>1999</td> <td>2002</td> </tr> <tr> <td>D Thakur</td> <td>1994</td> <td>1997</td> <td>2000</td> <td>2003</td> </tr> </table> </body> </html>
You can observe that heading row has default alignment i.e. (center, middle). Now next row is being aligned as (center, bottom). The third row is aligned (left, top) but the last cell of this row is aligned (center, middle) and this alignment override the earlier (left, top) alignment. The third row is aligned (right, middle) and the last row has the default alignment i.e. (left, middle).
Dinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular