Page 110 - TP_Pluse_V2.2_Class_7
P. 110

Following is an example of a table:
                                                                Student

                                   Roll No.            Name                Grade              Gender
                                      1                Aarav                 B                   M

                                      2              Gauransh                A                   M
                                      3               Himakshi               A                   F
                                      4                Rakshit               B                   M

                  Where, Student is the Title of the table which can be inserted by using the <CAPTION> tag. Roll No.,
                  Name, Grade and Gender are the table headings that can be created by using the <TH> tag.


                       CSS Properties Used with <TABLE> Tag
                  CSS provides various properties that can be used with <TABLE> tag to accomplish various tasks. They
                  are border, border-style, border-color, border-spacing, width, padding, background-color and color.
                  These are global properties of CSS which means that these can be used with any element of HTML. Let
                  us see how to use these properties with <TABLE> tag while creating a table in HTML.


                  Using Border Property

                  The border property of CSS allows you to apply a border to an element of HTML like <TABLE>. For
                  example:

                  <STYLE>

                  TABLE, TH, TD{border:2px;}

                  </STYLE>
                  Preceding code will apply a border of 2px to the table.


                  Using Border-style Property

                  The border-style property is used to apply the outline style of border of the table or any other element.
                  To use this property, it is necessary to use the border property. CSS provides different types of border
                  styles which are Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset, None and Hidden. You
                  can use any one of these styles at a time. If you use the None style, the border will not appear. For
                  example:

                  <STYLE>
                  TABLE, TH, TD {border:2px; border-style:solid;}

                  </STYLE>

                  Using Border-color Property

                  The border-color property allows you to apply a color to the border. For example:

                  <STYLE>

                  TABLE, TH, TD
                  108   Plus (Ver. 2.2)-VII
   105   106   107   108   109   110   111   112   113   114   115