Professional Documents
Culture Documents
Unit 3
Unit 3
<ol>
<li>Aries</li> Output
<li>Bingo</li> 1.Aries
2.Bingo
<li>Leo</li> 3.Leo
4.Oracle
<li>Oracle</li>
</ol>
HTML Ordered List or Numbered List
The HTML ol tag is used for ordered list. We can use ordered Type Description
list to represent items either in numerical order format or Type "1" This is the default type. In this type, the
alphabetical order format, or any format where an order is list items are numbered with numbers.
emphasized. There can be different types of numbered list:
Type "I" In this type, the list items are numbered
•Numeric Number (1, 2, 3) with upper case roman numbers.
•Capital Roman Number (I II III)
•Small Romal Number (i ii iii) Type "i" In this type, the list items are numbered
with lower case roman numbers.
•Capital Alphabet (A B C)
•Small Alphabet (a b c)
Type "A" In this type, the list items are numbered
with upper case letters.
To represent different ordered lists, there are 5 types of
Type "a" In this type, the list items are numbered
attributes in <ol> tag. with lower case letters.
<ol type="I"> Output: <ol type="A"> Output:
<li>HTML</li> I.HTML <li>HTML</li> A.HTML
<li>Java</li> II.Java <li>Java</li> B.Java
<li>JavaScript</li> III.JavaScript <li>JavaScript</li> C.JavaScript
<li>SQL</li> IV.SQL <li>SQL</li> D.SQL
</ol> </ol>
<ol reversed>
Output:
<li>HTML</li>
4. HTML
<li>Java</li>
3. Java
<li>JavaScript</li>
2. JavaScript
<li>SQL</li>
1.SQL
</ol>
start attribute
The start attribute is used with ol tag to specify from where to start the list items.
<ol type="i" start="5"> : It will show Roman lower case value starting with "v".
<ol type="i" start="5">
<li>HTML</li> Output:
<li>Java</li> v.HTML
<li>JavaScript</li> vi.Java
<li>SQL</li> vii.JavaScript
</ol> viii.SQL
HTML Unordered List or Bulleted List
In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list
also. The Unordered list starts with <ul> tag and list items start with the <li> tag.
<ul>
<li>Aries</li> Output
<li>Bingo</li>
•Aries
<li>Leo</li> •Bingo
•Leo
<li>Oracle</li> •Oracle
</ul>
The type Attribute
we can use type attribute for <ul> tag to specify the type of bullet you like.
By default, it is a disc.
Following are the possible options −
<html>
<head>
<title>HTML Unordered List</title>
</head> Beetroot
Ginger
<body>
Potato
<ul type = "square"> Radish
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Following is an example where we used <ul type = "disc">
<html>
<head>
•Beetroot
<title>HTML Unordered List</title> •Ginger
</head> •Potato
<body> •Radish
The definition list is very appropriate when you want to present glossary, list of terms or other name-
value list.
<dt>Aries</dt> Output
<dd>-One of the 12 horoscope sign.</dd> Aries
<dt>Bingo</dt> -One of the 12 horoscope sign.
Bingo
<dd>-One of my evening snacks</dd> -One of my evening snacks
Leo
<dt>Leo</dt>
-It is also an one of the 12 horoscope sign.
<dd>-It is also an one of the 12 horoscope sign.</dd> Oracle
-It is a multinational technology corporation.
<dt>Oracle</dt>
<dd>-It is a multinational technology corporation.</dd>
</dl>
HTML Nested List
A list within another list is termed as nested list. If you want a bullet list inside a numbered list then such type of list will
called as nested list.
We can create a table to display data in tabular form, using <table> element, with the help of <tr> ,
<td>, and <th> elements.
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is
defined by <td> tags.
HTML Table Tags
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.
<table>
<tr> Company Contact Country
<th>Company</th> TATA Maria Germany
<th>Contact</th>
<th>Country</th> Reliance Fransis Mexico
</tr>
<tr>
<td>TATA </td>
<td>Maria </td> Table Cells
<td>Germany</td> Each table cell is defined by a <td> and a </td> tag.
</tr>
<tr> Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
<td>Reliance</td>
<td>Fransis</td>
<td>Mexico</td> Table Headers
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:
</tr> th stands for table header.
</table>
HTML | <table> border Attribute <html>
<head>
<title>
HTML table border Attribute
</title>
</head>
The HTML <table> border Attribute is used
to specify the border of a table. It sets the <body>
border around the table cells. <h2>HTML table border Attribute</h2>
<table border="1">
Syntax: <caption>Author Details</caption>
<table border="1|0">
<tr>
<th>NAME</th>
<th>AGE</th>
Attribute Values: <th>BRANCH</th>
•1: It sets the border around the table cells. </tr>
<tr>
•0: It removes (not set) the border around the <td>BITTU</td>
table cells. <td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
</body>
</html>
HTML Table Padding & Spacing <html>
<head>
<title>
HTML tables can adjust the padding inside HTML table cellpadding Attribute
</title>
the cells, and also the space between the </head>
cells. <body>
<h2>HTML table cellpadding Attribute</h2>
<table border="1"
cellpadding="15">
<caption>Author Details</caption>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
</body>
<html>
HTML Table Padding & Spacing
<head>
<title>
The HTML <table> cellspacing Attribute is HTML table cellspacing Attribute
</title>
used to specify the space between the cells. The </head>
cellspacing attribute is set in terms of pixels. <body>
<h2>HTML table cellspacing Attribute</h2>
Syntax:
<table cellspacing="pixels"> <table border="1"
cellspacing="15">
Attribute Values: <caption>Author Details</caption>
•pixels: It sets the space between the cells in
<tr>
terms of pixels. <th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
</body>
</html>
Multiple rows/columns
Colspan
To make a cell span over multiple columns, use the colspan attribute:
<table>
<tr> Name Age
<th colspan="2">Name</th>
<th>Age</th> Jill Smith 43
</tr> Eve Jackson 57
<tr>
<td>Jill</td> Cell that spans two columns
<td>Smith</td> To make a cell span more than one column, use the colspan attribute.
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
Rowspan
To make a cell span over multiple rows, use the rowspan attribute:
<table>
<tr> Cell that spans two rows
<th>Name</th>
To make a cell span more than one row,
<td>Jill</td>
</tr> use the rowspan attribute.
<tr>
<th rowspan="2">Phone</th> Name Jill
<td>555-1234</td>
555-1234
</tr> Phone
<tr> 555-8745
<td>555-8745</td>
</tr>
</table>
<html>
Coloring cells
<head>
<title>
HTML table bgcolor Attribute
</title>
</head>
<body>
<h2>HTML table bgcolor Attribute</h2>
<table border="1"
bgcolor="green">
<caption>
Author Details
</caption>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
</body>
</html>
Column Specification
colspec
The <colspec> element contains a column specification for a table, including assigning a column name and number,
cell content alignment, and column width.
It allows authors to group together attribute specifications for table columns
char character Defines a character to use to align text on (use with align = "char"), not supported in Html5.
span number Defines the number of columns the <col> should span, not supported in Html5.
width pixels or % Specifies a default width for each column spanned by the current col element, not supported in Html5 .