Blocks, paragraphs, lists, tables - Inserting tables in HTML files

HTML gives you the possibility to insert 2-dimensional tables (that is to say tables with rows and columns). The best way for you to understand how to create HTML tables is still to have a look at a practical example:

HTML code:

<table border="1" align="center">
<caption>Example Table</caption>
<tr>
<td bgcolor="#C0C0C0">First name</td>
<td bgcolor="#C0C0C0">Name</td>
</tr>
<tr>
<td>Robert</td>
<td>Smith</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>

Output in the web browser:

*Example Table*
First name	Name
Robert	Smith
John	Doe

Remarks:

An HTML table is created with the tags <table> and </table>
An HTML table can be given a caption with the tags <caption> and </caption>.
A row is created with the tags <tr> and </tr>, and columns can be created within these rows with the tags <td> and </td>.
The attribute bgcolor allows you to change the background color of a row, column or cell.

Blocks, paragraphs, lists, tables - Organizing text into paragraphs

Paragraphs are easy to create in HTML: all you have to do is use the tags <p>Put the text here</p>.

Blocks, paragraphs, lists, tables - Creating lists in HTML

HTML allows you to create bulleted lists. Just as before, an example will suffice to introduce the corresponding HTML syntax:

Learn the HTML code:

<ul>
<li>
First element of your list goes here
</li>
<li>
Second element of your list goes here
</li>
</ul>

Output in the web browser:

First element of your list goes here
Second element of your list goes here

The bulleted list above is an example of unordered list. This is the reason why the list begins with the HTML tag <ul> (as in "unordered list") and ends with the HTML tag </ul>. As for the tags <li> and </li>, they denote list items.
In addition to unordered lists, there also exist ordered lists. The only difference in the syntax is that ordered lists will begin with the HTML tag <ol> and end with the HTML tag </ol>. Let's consider the very same example but this time featuring an ordered list:

Learn the HTML code:

<ol>
<li>
First element of your list goes here
</li>
<li>
Second element of your list goes here
</li>
</ol>

Output in the web browser:

First element of your list goes here
Second element of your list goes here

Remark:

Instead of disc bullets, you now have numbers (which seems perfectly normal since your list is supposed to be ordered).
There are different ways to change the bullets of your lists; a first way would be to use CSS stylesheets, which would permit you to use different types of bullets (or even your own).
Another way would be to use the deprecated type attribute in the ul, ol and li tags. For unordered lists, type can take the values disc, circle or square. For ordered lists, it can take the values a, A, I, i, and 1 depending on the kind of numbering you prefer. Let's now try the previous example again with an unordered list featuring square bullets:

Learn the HTML code:

<ul type="square">
<li>
First element of your list goes here
</li>
<li>
Second element of your list goes here
</li>
</ul>

Output in the web browser:

First element of your list goes here
Second element of your list goes here

Blocks, paragraphs, lists, tables - HTML blocks and HTML inline content

In the HTML language, you can group elements in order to apply certain properties on a macro-level instead of having to apply them repeatedly to different elements. Generally, such grouping of HTML elements is realized with the HTML tags <div> and </div> in order to create blocks, and with the HTML tags <span> and </span> for inline content, the difference being that the use of <div> will trigger the creation of a block starting at a new line, while the use of <span> will create that block on the current line.
In the example below, we show how the creation of a <div> block allows to align the text at the center of the line:

HTML code:

<div align="center">
First line of the block <br>
Second line of the block <br>
Third line of the block <br>
</div>

Output in the web browser:

First line of the block
Second line of the block
Third line of the block

Remark:

The HTML tags <div> and <span> will be used extensively in CSS stylesheets in order to optimize the formatting of your HTML webpages. For more information about this topic, please refer to our CSS tutorials.

We have seen that the HTML language offers a variety of structures which allow you to group your HTML content and define its properties more efficiently. This allows you to make this web content easy to move, convenient to update and more scalable. All these reasons will naturally lead you to learn more about CSS stylesheets, which represent the next step in the quest for more web development scalability.

Next tutorial: Meta tags and Search Engine Optimization
Previous tutorial: Text, fonts, links, images

Back to computer forums