Page 111 - Plus_V2.2_C7_Flipbook
P. 111

HTML Table Tags                Meaning of the HTML Table Tags

                                    <TABLE>            The entire table itself
                                   <CAPTION>           The caption/title of the table
                                    <THEAD>            The header  of the  table  shows the  titles  of the
                                                       columns at the top of the table.

                                    <TBODY>            The body  of the  table  consists  of the  main  data
                                                       wrapped in tags such as <TR>, <TD> e.t.c.
                                    <TFOOT>            The footer of the table shows summary information
                                                       like totals at the bottom.
                                      <TR>             The rows of the table
                                      <TD>             The cell that contains the data
                                      <TH>             The head of the column of the table
                                    <STYLE>            It is used to define the style information
                 HTML Table Tags and their meanings
                 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
                                                            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.


                        USING CSS WITH TABLES

                 CSS table styles elevate the visual appeal of plain HTML tables, enhancing their appearance and
                 readability.  Various  styling  options,  including  adjusting  borders, row-column  dimensions,  font
                 colors, and animations like hover effects, offer versatile ways to make HTML tables more engaging
                 and user-friendly.


                      CSS Table Properties
                 Table Properties in your document can be controlled using a variety of CSS properties. The basic
                 features that are available are listed in the following table along with how they map to the attributes
                 of table elements (<TABLE>).

                                               Purpose                    Table Properties
                                               Borders                         border
                                            Width of table                     width
                                            Height of table                    height
                                          Spacing inside cell                 padding

                                        Spacing between cells            border-spacing



                                                                                                  More on HTML5   109
   106   107   108   109   110   111   112   113   114   115   116