Page 38 - PortGPT_V2.1_C7_Flipbook
P. 38

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>: This tag is used for defining table rows.

                  •  <TD>: 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, Table: 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 which 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.

                  Write HTML codes to use border property.

                  <!DOCTYPE html>

                  <HTML>



                  36    Premium Edition-VII
   33   34   35   36   37   38   39   40   41   42   43