Scribd
Upload
9 views

02 HTML List N Tables

Uploaded by

zoom1
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

02 HTML List N Tables

Uploaded by

zoom1
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

HTML Lists

HTML can have Unordered Lists, Ordered Lists, or Description Lists:


Unordered HTML List Ordered HTML List HTML Description List

 The first item 1. The first item The first item


 The second item 2. The second item Description of item
 The third item 3. The third item The second item
 The fourth item 4. The fourth item Description of item

Unordered HTML Lists


An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles).

Unordered List:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Unordered HTML Lists - The Style Attribute


A style attribute can be added to an unordered list, to define the style of the marker:

Unorderd List:
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ul>

Style Description
list-style-type:disc The list items will be marked with bullets (default)

list-style-type:circle The list items will be marked with circles

list-style-type:square The list items will be marked with squares


Ordered HTML Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers.

Ordered List:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML Ordered Lists - The Type Attribute


A type attribute can be added to an ordered list, to define the type of the marker:

Ordered List:
<ol type="A">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ol>
Description
Type
type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

HTML Description Lists


A description list, is a list of terms, with a description of each term.

The <dl> tag defines a description list.


The <dt> tag defines the term (name), and the <dd> tag defines the data
(description).

Description List:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Nested HTML Lists


List can be nested (lists inside lists).

Nested Lists:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Chapter Summary
 Use the HTML <ul> element to define an unordered list
 Use the HTML style attribute to define the bullet style
 Use the HTML <ol> element to define an ordered list
 Use the HTML type attribute to define the numbering type
 Use the HTML <li> element to define a list item
 Use the HTML <dl> element to define a description list
 Use the HTML <dt> element to define the description term
 Use the HTML <dd> element to define the description data
 Lists can be nested inside lists
 List items can contain other HTML elements

<!DOCTYPE html>

<html>

<body>
<h2>Disc bullets</h2>

<ul style="list-style-type:disc">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

<h2>Circle bullets</h2>

<ul style="list-style-type:circle">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

<h2>Square bullets</h2>

<ul style="list-style-type:square">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ul>

</body></html>

Disc bullets
 Apples
 Bananas
 Lemons
 Oranges

Circle bullets
o Apples
o Bananas
o Lemons
o Oranges

Square bullets
 Apples
 Bananas
 Lemons
 Oranges

<!DOCTYPE html>

<html>

<body>

<h4>A nested List:</h4>

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea

<ul>

<li>China</li>

<li>Africa</li>
</ul>

</li>

</ul>

</li>

<li>Milk</li>

</ul>

</body>

</html>

A nested List:

 Coffee
 Tea
o Black tea
o Green tea
 China
 Africa
 Milk

Defining HTML Tables


Example
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Example explained:

Tables are defined with the <table> tag.


Tables are divided into table rows with the <tr> tag.

Table rows are divided into table data with the <td> tag.

A table row can also be divided into table headings with the <th> tag.

Table data <td> are the data containers of the table.


They can contain all sorts of HTML elements like text, images, lists, other tables, etc.

An HTML Table with a Border Attribute


If you do not specify a border for the table, it will be displayed without borders.

A border can be added using the border attribute:

Example
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

To add borders, use the CSS border property:

Example
table, th, td {
border: 1px solid black;
}

Remember to define borders for both the table and the table cells.
An HTML Table with Collapsed Borders
If you want the borders to collapse into one border, add CSS border-collapse:

Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

An HTML Table with Cell Padding


Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without padding.

To set the padding, use the CSS padding property:

Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th,td {
padding: 15px;
}

HTML Table Headings


Table headings are defined with the <th> tag.

By default, all major browsers display table headings as bold and centered:

Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

<!DOCTYPE html>
<html>
<body>

<h2>HTML Tables</h2>

<p>HTML tables start with a table tag.</p>


<p>Table rows start with a tr tag.</p>
<p>Table data start with a td tag.</p>

<hr>
<h2>1 Column:</h2>

<table>
<tr>
<td>100</td>
</tr>
</table>

<hr>
<h2>1 Row and 3 Columns:</h2>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<hr>
<h2>3 Rows and 3 Columns:</h2>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
<tr>
<td>700</td>
<td>800</td>
<td>900</td>
</tr>
</table>

<hr>

</body>
</html>

HTML Tables
HTML tables start with a table tag.

Table rows start with a tr tag.

Table data start with a td tag.

1 Column:
100

1 Row and 3 Columns:


100 200 300
3 Rows and 3 Columns:
100 200 300

400 500 600

700 800 900

HTML Table - Cell that Spans Many


Columns
To make a cell span more than one column, use the colspan attribute:

Example
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>

Try it Yourself »

HTML Table - Cell that Spans Many


Rows
To make a cell span more than one row, use the rowspan attribute:

Example
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

You might also like