Page 97 - Touchpad_Plus_V3.2_Class 7
P. 97

CREATING TABLES
                 Tables represent the data in the form of rows and columns. In HTML5, a table  is created by
                 using the <TABLE> tag. The <TABLE> tag should be defined inside the <BODY> tag. It is a
                 container tag. Different kinds of tables can be created by using the following child tags of the
                 <TABLE> tag:

                     ✶ <TR>: The <TR> stands for Table Row, and is used to start a row. It ends up with </TR>. It
                    is a container tag.
                     ✶ <TD>: The <TD> tag stands for Table Data. This tag is used for defining table data, that is,
                    the data of the cells.

                     ✶ <CAPTION>: This tag is used for defining the title of the table.
                     ✶ <TH>: This tag is used for defining table headings.
                 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

                                                            Students record
                 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

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