HTML Tables and Lists

0
937

Once again Hi friends! today I am back with some more information.

In this chapter we will deal with some interesting part – creating tables and lists in a webpage.

  • HTML Tables:
    • Tables are nothing but the tabular format, a combination of rows and columns just like a simple Microsoft Excel sheet.
    • What are tables used for?
    • Tables are used for displaying the data in a tabular format.
    • Next, it can be used to compare and contrast some topics.
    • Tables can also be used for designing and layout of a webpage.
    • But now days this practice is termed to be a bad practice, because for designing and layout purpose you can use CSS (Cascading Style Sheet).
    • So, remember that all sort of designing and layout i.e. headers, footers etc. should all be done using CSS.
    • Simple Table Syntax:
    • We have understood what is table and for what purpose it is used.
    • Now we will understand how it is created.
    • HTML has some tags used to create a table.
    • These tags are table tag and end of table tag, tr tag and end of tr tag and td and end of td tag.
    • In the syntax for creating table we have a table tag.
    • Within table tag we have a tr tag.
    • Then after that we have td tag within tr tag.
    • The syntax for creating table is as shown in the figure:

    table_code
    fig 1

    • Output will be somewhat like this:
    ContentContentContent
    ContentContentContent
    ContentContentContent

    • Come on; now let us understand the syntax.
    • First of all, let us understand the full form of the tags.
    • tr – table row.
    • td – table data.
    • table tag and end of table tag are used to create a table.
    • table tag is the starting tag and end of table tag signifies end of the table.
    • A table contains rows and columns.
    • tr tag and end of tr tag are used to create rows in the table.
    • The number of tr tags in the syntax specify the number of horizontal rows in the table.
    • The columns and content in the table is created using td tag and end of td tag.
    • The number of td tags in a tr tag specify the number of columns in that particular row.
    • Thus,
      starting tag for tr
      starting tag for td Content end of td tag
      starting tag for td Content end of td tag
      starting tag for td Content end of td tag
      end of tr tag

      creates three columns in a row, having “Content” as its data.

    • Note one thing, by default table has no border.
    • For applying border, you need to use “border” attribute of table tag.
    • Eg: To get a single line border, inside starting of table tag you need to use border attribute having value =1.
    • This will give a single line border to the table and as the value of the attribute increases, it will increase the border width.
    • Now, let us take a glance at HTML lists.

  • HTML Lists:
    • List as tables is used to show information in the list format.
    • What are lists used for?
    • Lists are used to group together related pieces of information.
    • It is used for ranking the data; I mean numbering or bulleting the data according to its rank.
    • It can also be used for designing and layout formatting.
    • For an example: You can design a menu on webpage using lists.
    • HTML contains three types of lists.
    1. Ordered List
    2. Un-ordered List
    3. Definition List
    • Ordered List – Ordered list has numbering done for each item or data.
    • Un-ordered List – Un-ordered list has bullets for each item.
    • Definition List – This List is somewhat of the form having a definition heading and then its definition below. It is normally not used frequently.
    • Now, let’s learn the syntax for Lists.
    • Lists Syntax:
    1. Ordered List:
    • Syntax for ordered list is as shown in fig 2

    ordered_list
    fig 2

    • OUTPUT:

    1.Content
    2.Content
    3.Content

    • ol tag and end of ol tag are used to create one ordered list.
    • By default numbering starts from 1.
    • li denotes “list item”.
    • li tag and end of li tag specify the items in the list.

    2. Un-ordered List:

    • Syntax for un-ordered list is as shown in fig 3.

    unordered_list
    fig 3

    • OUTPUT:

    •Content
    •Content
    •Content

    • ul tag and end of ul tag are used to create one un-ordered list.
    • By default “disc” is used as bullet for every item.
    • li denotes “list item”.
    • li tag and end of li tag specify the items in the list.

    3. Definition List:

    • Syntax for definition list is shown in fig 4 below.

    definition_list
    fig 4

    • OUTPUT:

    Tea –
         A hot beverage.
    Ice-cream –
         A dessert.

    • dl and end of dl tag are used to create one definition list.
    • dl tag is used in conjunction with dt tag (definition term) and dd tag (data description) tags.
    • Here we finished with a glance at tables and lists.
      We will try it practically in next session.