Page 97 - TechPluse_C7_Flipbook
P. 97

Here, the cell “Sports” is taking a span of 3 rows and “Martial Arts” is taking a span of 2 rows.

                     Example for using ROWSPAN attribute is:
                       <TD ROWSPAN="3">
                    COLSPAN: The COLSPAN attribute applies when a single cell is extended to more than
                     a single column, that is, the cell spans for 2 or more columns instead of 1 as shown in table

                     below:

                                   Roll No.              Name                Marks         Grade
                                                   First         Last


                                                           Table with colspan

                     Here, “Name” cell is taking a span of 2 columns. Example for using COLSPAN attribute is:
                     <TD COLSPAN="2">

                    VALIGN: The VALIGN attribute is used to align the position of text in the cell vertically, that
                     is, vertical alignment. It can take any one from three values, “top”, “middle” and "bottom".
                     This is useful when a text has to be aligned in case of rowspan. Consider the table with
                     rowspan (previously used), the text “Sports” appears to be in the middle and “Martial Arts” at
                     bottom vertically with respect to the Types column.
                 Attributes of the <TR> Tag

                 The <TR> stands for Table Row, which is used to starts a row and ends up with </TR>. It is a
                 container tag. All the attributes discussed with <TD> tag can also be used with the <TR> tag
                 except the ROWSPAN and COLSPAN attributes.
                 HTML Code to Create a Table

                 Let us create a table using the <TABLE> tag.
                 <HTML>

                 <HEAD> <TITLE> Students of Class </TITLE>
                 </HEAD>
                 <BODY>
                     <TABLE BORDER="1" BORDERCOLOR="RED">
                         <CAPTION> <B> Table : Student </B> </CAPTION>
                         <TR BGCOLOR="lightgreen">
                            <TH> Roll No. </TH>

                            <TH> Name </TH>
                            <TH> Grade </TH>
                            <TH> Gender </TH>
                         </TR>
                         <TR>
                           <TD> 1 </TD>
                           <TD> Aarav </TD>



                                                                                      Lists and Tables in HTML       95
   92   93   94   95   96   97   98   99   100   101   102