Scribd Logo
Upload

Welcome to Scribd!

  • 3 views

    HTML Lists and Tables

    Uploaded by

    Ritik 2.0
    The document discusses HTML lists and tables. It describes the different types of lists that can be created using <ul>, <ol>, and <dl> tags. It also discusses how to customize lists using attributes like type and start. The document then explains how to create tables using <table>, <tr>, <th>, and <td> tags and how to style them using attributes for these tags. It provides examples of creating an unordered list, ordered list, definition list, and a basic table.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    HTML Lists and Tables

    Uploaded by

    Ritik 2.0
    3 views17 pages
    The document discusses HTML lists and tables. It describes the different types of lists that can be created using <ul>, <ol>, and <dl> tags. It also discusses how to customize lists using attributes like type and start. The document then explains how to create tables using <table>, <tr>, <th>, and <td> tags and how to style them using attributes for these tags. It provides examples of creating an unordered list, ordered list, definition list, and a basic table.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses HTML lists and tables. It describes the different types of lists that can be created using <ul>, <ol>, and <dl> tags. It also discusses how to customize lists using attributes like type and start. The document then explains how to create tables using <table>, <tr>, <th>, and <td> tags and how to style them using attributes for these tags. It provides examples of creating an unordered list, ordered list, definition list, and a basic table.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    3 views17 pages

    HTML Lists and Tables

    Uploaded by

    Ritik 2.0
    The document discusses HTML lists and tables. It describes the different types of lists that can be created using <ul>, <ol>, and <dl> tags. It also discusses how to customize lists using attributes like type and start. The document then explains how to create tables using <table>, <tr>, <th>, and <td> tags and how to style them using attributes for these tags. It provides examples of creating an unordered list, ordered list, definition list, and a basic table.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 17

    Lists and Tables in

    HTML
    By
    Mamata Pandey
    Lists
    HTML lists allow web developers to group a set of related items in lists
    HTML offers three ways for specifying lists of information
    • <ul> − An unordered list. This will list items using plain bullets.
    • <ol> − An ordered list. This will use different schemes of numbers to list your items.
    • <dl> − A definition list. This arranges your items in the same way as they are arranged
    in a dictionary.

    All lists must contain one or more list elements within <li></li> tags
    Unordered List
    <ul> Vegetables
    <li>Beetroot</li>
    <li>Ginger</li>
    <li>Potato</li>
    <li>Radish</li>
    </ul>
    Type attribute of <ul> tag

    You can use type attribute for <ul> tag to specify the type of bullet you like

    <ul type = "square">


    <ul type = "disc">
    <ul type = "circle">
    Ordered List
    <ol> Vegetables
    <li>Beetroot</li>
    <li>Ginger</li>
    <li>Potato</li>
    <li>Radish</li>
    </ol>
    Type attribute of <ol> tag
    You can use type attribute for <ol> tag to specify the type of numbering you
    like. By default, it is a number

    <ol type = "1"> - Default-Case Numerals


    <ol type = "I"> - Upper-Case Numerals
    <ol type = "i"> - Lower-Case Numerals
    <ol type = "A"> - Upper-Case Letters
    <ol type = "a"> - Lower-Case Letters.
    Computer Science
     BCA
     MCA
    Management
     BBA
     MBA
    Start attribute of <ol> tag

    You can use start attribute for <ol> tag to specify the starting point of
    numbering you need.
    Example:
    <ol type = "1" start = "4"> - Numerals starts with 4
    <ol type = "I" start = "4"> - Numerals starts with IV
    <ol type = "i" start = "4"> - Numerals starts with iv
    <ol type = "a" start = "4"> - Letters starts with d
    <ol type = "A" start = "4"> - Letters starts with D
    Definition List
    HTML supports a list style which is called definition lists where entries are
    listed like in a dictionary or encyclopedia
    The definition list is the ideal way to present a glossary, list of terms, or other
    name/value list
    Definition List makes use of following three tags

    • <dl> − Defines the start of the list


    • <dt> − A term
    • <dd> − Term definition
    Definition List: Example

    <dl>
    <dt><b>HTML:</b></dt><dd>Hyper Text Markup Language</dd>
    <dt><b>HTTP</b></dt><dd>Hyper Text Transfer Protocol</dd>
    </dl>
    Tables
    The HTML tables allow web authors to arrange data like text, images, links,
    other tables, etc. into rows and columns of cells

    An HTML table is defined with the <table> tag.


    Each table row is defined with the <tr> tag.
    A table header is defined with the <th> tag. By default, table headings are
    bold and centered.
    A table data/cell is defined with the <td> tag
    HTML Table Tag
    Tag Description

    <table> It defines a table.


    <tr> It defines a row in a table.
    <th> It defines a header cell in a table.
    <td> It defines a cell in a table.
    <caption> It defines the table caption.
    <colgroup> It specifies a group of one or more columns in a table for formatting.
    <col> It is used with <colgroup> element to specify column properties for each column.
    <tbody> It is used to group the body content in a table.
    <thead> It is used to group the header content in a table.
    <tfooter> It is used to group the footer content in a table.
    Table: Example
    <table>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Akash</td>
                <td>Sharma</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Neha</td>
                <td>Singh</td>
                <td>32</td>
            </tr>
            <tr>
                <td>Aman</td>
                <td>Kumar</td>
                <td>22</td>
            </tr>
     </table>
    <table> tag attributes
    Attribute Value Description
    align right Visual alignment.
    left
    center
    justify

    bgcolor rgb(x,x,x) colorname Specifies the background color of the table.

    border pixels Specifies the border width. A value of "0" means no border.
    cellpadding pixels or % Specifies the space between the cell borders and their contents.

    cellspacing pixels or % Specifies the space between cells.


    frame void Used in conjunction with the border attribute, specifies which side of the frame
    above that makes up the border surrounding the table is displayed
    below
    hsides
    lhs
    rhs
    vsides
    box
    border
    <th> and <td> tag attributes
    Attribute Name Type of Value
    Align Left, Right, Centre
    Bgcolor Color name, rgb(), hexcode
    Colspan Number
    Rowspan Number
    Height Pixel or Percentage
    Valign Top, Middle, Bottom
    Width Pixel or Percentage
    Name Marks
    Roll no IWT DBMS
    First Middle Surname CN
    Theory Lab Theory Lab

    <tr>
    <th rowspan=“2”>Roll No</th>
    <th colspan =“3”>Name
    <th colspan=“5”>Marks
    </tr>
    Thank You

    You might also like