Page 116 - Trackpad_ipro 4.1_Class7
P. 116

Following is an example of a table:

                                                            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 sets the colour to the border. For example:

                  <style>

                  table, th, td
                  {


                   114     iPro (Ver. 4.1)-VII
   111   112   113   114   115   116   117   118   119   120   121