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:
- Learn HTML
- Learn CSS
- 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
The "style" attribute
The style attribute is actually a shortcut to applying a CSS style. We will learn more properties you can change with the "style" attribute in our CSS tutorial, so hang tight!
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:
<thead>
- Specify the column names.
- Use the
<tr>
tag to open the header line. - Use the
<th>
to specify each column header name. <tbody>
- Use
<tr>
to add a row. - Within each
<tr>
tag, add a<td>
to place a table data cell. <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
HTML is for semantic markup, CSS is for presentation
If you plan on ever learning CSS (which we strong recommend), you can go ahead and gloss over this section. Remember that HTML should handle semantic markup, while we'll use CSS for styling and presentation! :-)
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).