HTML 5: Presenting Data

Lists

HTML provides ways of not only presenting text, but also data. The main forms of data presentation are lists and tables. We'll start by looking at lists, then move onto how to implement a table.

There are two main types of lists used in HTML. These are used to hold any group of related items.

Ordered Lists

Ordered lists have numbering and pertain to a certain ordered.

To specify an ordered list, use the <ol> tag to open the list, then use <li> tags for each list item.

 <li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Learn JavaScript</li>
</ol>

Specifying list types

Note that you may specify a type attribute per list, which shows how the items will be numbered.

The possible values are "1" for numeric, "A" for uppercase letters, "a" for lowercase letters, "I" for uppercase roman numbers, and "i" for lowercase roman numerals.

In the example above we chose I, which makes are list items show as Roman Numerals.

Thus our output would look like this:

1. Learn HTML
2. Learn CSS
3. Learn JavaScript

Unordered Lists

Unordered are lists with no order to them.

The <ul> tag is used for unordered lists. Just like in ordered lists, we use the <li> tag per each list item.

<ul style="list-style-type: disc">
  <li>Gym</li>
  <li>Tan</li>
  <li>Laundry</li>
</ul>

Specifying List Style Types

We can also customize the bullet points of an unordered list. Use the <style> attribute, then specify disc, circle, square or none for the list-style-type property.

• Gym
• Tan
• Laundry

Listception

To place a list within another, simply embed a list within another list.

<h3>Developing a website</h3>
<ul>
  <li>Front end technologies</li>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
  <li>Back end technologies</li>
  <ul>
    <li>PHP</li>
    <li>MySQL</li>
</ul>
</ul>

Developing a website

• Front end technologies
• HTML
• CSS
• JavaScript
• Back end technologies
• PHP
• MySQL

Dictionary Lists

There is one type of list that doesn't get used too often, but is still important to know.

Definition lists, denoted by <dl> are used to map a key to one or more values.

Instead of using <li> tags, we use the <dt> to place a word, followed by a <dd> to place its definition.

Note that you can place two definition terms if there are more than one meaning to a word.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language: a set of standards, a variety of SGML, used to tag the elements of a hypertext document, the standard for documents on the World Wide Web.</dd>
  <dt>CSS</dt>
  <dd>(Computer Science) Cascading Style Sheets: used to style HTML files.</dd>
  <dd>(Social Welfare) Certificate in Social Service.</dd>
  <dt>JavaScript</dt>
  <dd>Used as the standard programming language to implement user interactivity with the browser.</dd>
</dl>

Here's what the output would look like when using Bootstrap, a CSS Framework.

HTML

HyperText Markup Language: a set of standards, a variety of SGML, used to tag the elements of a hypertext document, the standard for documents on the World Wide Web.

CSS

(Computer Science) Cascading Style Sheets: used to style HTML files.

(Social Welfare) Certificate in Social Service.

JavaScript

Used as the standard programming language to implement user interactivity with the browser.

Tables

When presenting a data on your webpage, it's best to use the HTML <table> element.

Creating an HTML Table

Firstly, just beneath the <table> tag, we write a <caption>.

Similarly to an HTML document, we break our table into three components:

1. <thead>
• Specify the column names.
• Use the <tr> tag to open the header line.
• Use the <th> to specify each column header name.
2. <tbody>
• Use <tr> to add a row.
• Within each <tr> tag, add a <td> to place a table data cell.
3. <tfoot>
• Include any data that characterizes the data in that column.
• eg. total sum, average, etc.

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
      <th>Expenditures</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
      <td>$130</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
      <td>$50</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
      <td>$30</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$100</td>
      <td>$50</td>
    </tr>
  </tbody>
</table>

Month	Savings	Expenditures
Sum	$180	$130
January	$100	$50
February	$80	$30
March	$100	$50

To have a cell take up more than one space, use the "colspan" and "rowspan" attributes with an integer value within the <td> element.

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
      <th>Expenditures</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td colspan="2">$50</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
      <td>$50</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
      <td>$30</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$100</td>
      <td>$50</td>
    </tr>
  </tbody>
</table>

Month	Savings	Expenditures
Net Earning	$50
January	$100	$50
February	$80	$30
March	$100	$50

Styling

Here is a list of styles you can apply to the "style" attribute. Use the pixel dimension to specify a length.

border

Specifies the width of border.

cellspacing

Space between adjacent cells.

cellpadding

Amount of space between adjacent cells.

width

Width of a table.

Rules

Thickness of table's internal cell borders.

Frame

Which outer border to be drawn. Values include:

Border or box (all borders)

void (no borders)

above (top)

below (bottom)

hsides (top and bottom)

vsides (left and right)

LHS (left-hand-side)

RHS (right-hand-side).