Html-for Beginners 04-list And Tables

HTML for Beginners 04 List And Tables

HTML List Example

An Unordered List:

  • Item
  • Item
  • Item
  • Item

An Ordered List:

  1. First item
  2. Second item
  3. Third item
  4. Fourth item

Unordered HTML List

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) by default:

Example

<ul>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
 </ul>

Ordered HTML List

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

The list items will be marked with numbers by default:

Example

<ol>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
 </ol>

Nested HTML Lists

List can be nested (lists inside lists):

Example

<ul>
 <li>Coffee</li>
 <li>Tea
 <ul>
 <li>Black tea</li>
 <li>Green tea</li>
 </ul>
 </li>
 <li>Milk</li>
 </ul>

HTML Table Example

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Defining an HTML Table

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.

Example

<table>
 <tr>
 <th>Firstname</th>
 <th>Lastname</th>
 <th>Age</th>
 </tr>
 <tr>
 <td>Jill</td>
 <td>Smith</td>
 <td>50</td>
 </tr>
 <tr>
 <td>Eve</td>
 <td>Jackson</td>
 <td>94</td>
 </tr>
 </table>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.