Scribd Logo
Upload

Welcome to Scribd!

  • Untitled

    Uploaded by

    BRAHMROOP MUCHHAL
    11 views12 pages
    The document discusses different types of lists and tables that can be created in HTML. It describes unordered lists, ordered lists, and description lists, and provides examples of how to code each using HTML tags like <ul>, <li>, <ol>, and <dl>. It also discusses how to create tables using <table>, <tr>, <td>, and <th> tags and describes various table attributes that control borders, colors, padding, and more.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses different types of lists and tables that can be created in HTML. It describes unordered lists, ordered lists, and description lists, and provides examples of how to code each using HTML tags like <ul>, <li>, <ol>, and <dl>. It also discusses how to create tables using <table>, <tr>, <td>, and <th> tags and describes various table attributes that control borders, colors, padding, and more.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views12 pages

    Untitled

    Uploaded by

    BRAHMROOP MUCHHAL
    The document discusses different types of lists and tables that can be created in HTML. It describes unordered lists, ordered lists, and description lists, and provides examples of how to code each using HTML tags like <ul>, <li>, <ol>, and <dl>. It also discusses how to create tables using <table>, <tr>, <td>, and <th> tags and describes various table attributes that control borders, colors, padding, and more.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 12

    List: It is the most efficient way of presenting information in

    a precise manner.
    Types of List in HTML:
    ➢Unordered List/Bulleted List
    ➢Ordered List/Numbered List
    ➢Description List

    Unordered List:
    It is used when the items(elements) are not to be displayed
    in any particular sequence. It is also known as Bulleted List.
    The list starts with<ul> tag and ends with</ul> tag.

    <li> tag: It is used to add items in the List. It is an empty


    element.
    Example:
    <html>
    <head>
    <title> Creating Unordered List</title>
    </head>
    <body>
    <font size="5" color="green">
    <ul type="square">
    <li>Pen
    <li>Pencil
    <li>Eraser
    <li>Sharpener
    <li>Ruler
    </ul>
    </font>
    </body>
    </html>
    3 types of Unordered/Bulleted list:
    ➢Disc (filled Circle)
    ➢Circle
    ➢Square

    Ordered List :
    It is used to display the list of items in a
    specific order. It is also known as
    Numbered List. The list begins with<ol>
    tag and ends with</ol> tag.

    The start attribute specifies the start value of the first list
    item in an ordered list.
    This value is always an integer.
    5 types of Ordered/Numbered list:
    ➢<ol type=“1”>
    ➢<ol type=“A”>
    ➢<ol type=“a”>
    ➢<ol type=“I”>
    ➢<ol type=“i”>
    Example:
    <html>
    <head>
    <title> Creating Ordered List</title>
    </head>
    <body>
    <font size="5" color="green">
    <ol type="I" start="3">
    <li>Pen
    <li>Pencil
    <li>Eraser
    <li>Sharpener
    <li>Ruler
    </ol>
    </font>
    </body>
    </html>
    Description List:
    It consists of a term followed by its definition. It is used to present
    glossary, list of terms etc. The list starts with <dl> tag and ends
    with</dl> tag.
    Inside <dl> tag, two more tags are used.
    <dt>: Definition Term
    <dd> Definition Description
    <html>
    <head>
    <title> Creating Description List</title>
    </head>
    <body>
    <font size="5" color="green">
    <dl>
    <dt>bat</dt>
    <dd>stick for hitting ball in games</dd>
    <dd> a mammal</dd>
    </dl>
    <dl>
    <dt> orange</dt>
    <dd>a round juicy citrus fruit</dd>
    <dd> a color name</dd>
    </dl>
    </font>
    </body>
    </html>
    Tables:
    They are an attractive and effective way to present
    information in the form of rows and columns. They are used
    to make comparative analysis of data.
    Each table begins with <table> tag and ends with </table>
    tag.
    Each row begins with <tr> tag and ends with </tr> tag.
    Each cell begins with<td> tag and ends with </td> tag inside
    column.
    Each column heading begins with <th> tag and ends with
    </th> tag.
    <tr>: Table Row Tag
    <td> Table Data Tag
    <th> Table Heading Tag.
    <html>
    <head>
    <title> Creating Table</title>
    </head>
    <body>
    <table>
    <tr><th>S.No.</th><th>Name</th> <th>
    grades</th></tr>
    <tr><td> 1.</td><td> priyanka</td><td>
    A</td></tr>
    <tr><td>2.</td><td> pardeep</td><td>
    B</td></tr>
    <tr><td> 3.</td> <td> sanajana</td><td>
    A</td></tr>
    </table>
    </body>
    </html>
    <html>
    <head>
    <title> Creating Table</title>
    </head>
    <body>
    <table border="3" bordercolor="red"
    bgcolor="yellow" height="300" width=“200"
    cellpadding="10" cellspacing="10">
    <tr><th>S.No.</th><th>Name</th> <th>
    grades</th></tr>
    <tr><td> 1.</td><td> priyanka</td><td>
    A</td></tr>
    <tr><td>2.</td><td> pardeep</td><td>
    B</td></tr>
    <tr><td> 3.</td> <td> sanajana</td><td>
    A</td></tr>
    </table>
    </body>
    </html>
    <html>
    <head>
    <title> Creating Table</title>
    </head>
    <body>
    <table border="3" bordercolor="red"
    bgcolor="yellow" height="300" width="200"
    Cellpadding="10" cellspacing="10">
    <tr><th bgcolor="pink"><font
    color="blue">S.No.</font></th><th>Name</th>
    <th> grades</th></tr>
    <tr><td> 1.</td><td> priyanka</td><td> A</td>
    </tr>
    <tr><td>2.</td><td> pardeep</td><td> B</td>
    </tr>
    <tr><td> 3.</td> <td> sanajana</td><td> A</td>
    </tr>
    </table>
    </body>
    </html>
    Attributes of <table> tag:
    border : Used to set border width of the table. The value of
    border attribute is given in pixels.
    bordercolor: Used to set the border color of the table.
    bgcolor: Used to set the background color of the table.
    height and width: Used to specify the height and width of a
    table on web page in pixels respectively.
    cellpadding: Specifies the space between the cell borders
    and cell content.
    cellspacing: Specifies the space between 2 cells.

    You might also like