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