HTML INTERMEDIATES PART I

HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

Define a HTML Table:

The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.

<table style="width:100%">

  <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>

• To let the borders collapse into one border, add the CSS border-collapse property:

table, th, td {

  border: 1px solid black;

  border-collapse: collapse;

} 

• 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.

th, td {

  padding: 15px;

}

• By default, table headings are bold and centered.
• To left-align the table headings, use the CSS text-align property:

th {

  text-align: left;

}

• Border spacing specifies the space between the cells.
• To set the border spacing for a table, use the CSS border-spacing property:

table {

  border-spacing: 5px;

}

Note: If the table has collapsed borders, border-spacing has no effect. 

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>

 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>

HTML Lists

An unordered HTML list:

• Item
• Item
• Item
• Item

An ordered HTML list:

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

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

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul> 

Unordered HTML List 

The CSS list-style-type property is used to define the style of the list item marker. It can have one of the following values: 

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

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

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

<ul style="list-style-type:none;">

 <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

Use the CSS property float:left to display a list horizontally

li {

  float: left;

}

Ordered HTML List

The type attribute of the <ol> tag, defines the type of the list item marker:

Type         Description

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

<ol type="1">

<ol type="A">

<ol type="a">

<ol type="I">

<ol type="i">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute: 

<ol start="50">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>