Page 111 - TP_iPlus_V2.1_Class7
P. 111

Lists and Tables



                    in HTML
                                                                                              9













                         Learning Outcomes


                             Creating Lists                                        Creating Tables





                 Similar to MS Word, you can also create different types of lists and tables on the web pages in
                 HTML5. In the previous chapter, you have learnt the basic tags of HTML and their attributes. In
                 this chapter, you will learn how to create lists and tables in HTML5.

                  i +  CREATING LISTS


                 A list is a collection of related items that can be used to represent information in pointed form. In
                 our daily routine, we have to write many things, such as a list of items required for a festival and a
                 list of steps to make a dish. The list feature of HTML5 allows us to display this type of information
                 on the web page in an organised manner. There are three types of lists named ordered list,
                 unordered list and definition list that can be created in HTML5 to display the items in the form
                 of list.
                 CSS List Properties

                 CSS list properties are used to change the appearance of ordered and unordered lists in HTML5.
                 These properties with their values are given in the following table:

                    PROPERTY                          Value                                 Description

                  list-style-type  For ordered list: decimal,  lower-alpha,  Specifies the type of the list item
                                   upper-alpha, lower-roman, upper-roman marker.
                                   For unordered list: disc, circle, square
                  list-style-image URL of the image                             Specifies an image to be used as
                                                                                the list item marker instead of the
                                                                                default marker.

                  list-style-color  Colour name                                 Specifies the color of the list item
                                                                                marker.




                                                                                                                 109
                                                                                        Lists and Tables in HTML
   106   107   108   109   110   111   112   113   114   115   116