Domain
Find Your Domain
AfterMarket
Manage Your Portfolio
Auctions
...using apples, cherries, & pears!
Hopefully you've already read our Basic HTML - Getting Started with Your Website post, so you're already an HTML wizard at fonts, spacing, links, and images. Now our next step is to add a few additional things to your HTML arsenal: creating lists and tables.
First things first, we'll need something to list and put in our tables and in this case, I chose fruit, specifically apples, cherries, and pears. So now, let's start with lists. There are three types of lists: ordered, unordered, and definition. An ordered list has numbers or letters and looks like this:
- apples
- cherries
- pears
In HTML you start an ordered list with <ol> for "ordered list" and use <li> for each "list item," so the code looks like this:
<ol>
<li>apples</li>
<li>cherries</li>
<li>pears</li>
</ol>
Numbers are the default style for ordered lists (as you can see above), but you can choose to use letters or roman numerals instead:
<ol type="a"> = a, b, c
<ol type="i"> = i, ii, iii
You can also choose to capitalize your letters and Roman numerals by capitalizing them in your code.
An unordered list just uses bullets and looks like this:
- apples
- cherries
- pears
In HTML you start it with <ul>, which of course stands for "unordered list":
<ul>
<li>apples</li>
<li>cherries</li>
<li>pears</li>
</ul>
Like with your ordered list, you can also change the bullet style of your unordered list. The default is always the filled circle, but you can also use an unfilled circle and a filled square:
<ul type="circle"> =
- apples
<ol type="square"> =
- apples
The final type of list is a definition list, which allows you to define a list of items such as this:
apples
- pink lady
- golden delicious
cherries
- rainier
-bing
pears
- d'anjou
-bartlett
And in HTML the list is defined with a (surprise, surprise!) <dl> for "definition list." This list allows you more flexibility with the bullets because you have to put them in with your text as you'll see below:
<dl>
<dt>apples</dt>
<dd>- pink lady</dd>
<dd>- golden delicious</dd>
<dt>cherries</dt>
<dd>- rainier</dd>
<dd>- bing</dd>
<dt>pears</dt>
<dd>- d'anjou</dd>
<dd>- bartlett</dd>
</dl>
As you can see, <dt> is the term you're defining and <dd> describes the term in <dt>.
So now that you've learned how to list your fruit, you may want to consider putting it in a table, no not that kind of table, this kind:
| apples | cherries | pears |
|---|---|---|
| pink lady | rainier | d'anjou |
| golden delicious | bing | bartlett |
Which looks like this in HTML:
<table border="1">
<tr>
<th>apples</th>
<th>cherries</th>
<th>pears</th>
</tr>
<tr>
<td>pink lady</td>
<td>rainier</td>
<td>d'anjou</td>
</tr>
<tr>
<td>golden delicious</td>
<td>bing</td>
<td>bartlett</td>
</tr>
</table>
<tr> stands for "table row", <th> stands for table header, and <td> stands for "table data." <table border="1"> gives the table a border, but if you don't want your table to have a border, you can remove it by using just <table> at the beginning of your code:
| apples | cherries | pears |
|---|---|---|
| pink lady | rainier | d'anjou |
| golden delicious | bing | bartlett |
You can increase the internal borders using what is called cellspacing by adding the cellspacing info like this: <table border="1" cellspacing="10">.
| apples | cherries | pears |
|---|---|---|
| pink lady | rainier | d'anjou |
| golden delicious | bing | bartlett |
There is also what is known as cellpadding, which adds space in the cells themselves. Cellpadding can also be added like this: <table border="1" cellpadding="10">.
| apples | cherries | pears |
|---|---|---|
| pink lady | rainier | d'anjou |
| golden delicious | bing | bartlett |
If you need to create a cell that spans more than one column you can do so by using <th colspan="3">, with "3" being the number of cells to span, instead of just using <th>:
| Types of Fruit | ||
|---|---|---|
| apples | cherries | pears |
<table border="1">
<tr>
<th colspan="3">Types of Fruit</th>
</tr>
<tr>
<td>apples</td>
<td>cherries</td>
<td>pears</td>
</tr>
</table>
You can also create a cell that spans more than one row using <th rowspan="2">. Again the number "2" represents the number of, in this case, rows to span:
| Fruit | apples |
|---|---|
| Types | pink lady |
| golden delicious |
<table border="1">
<tr>
<th>Fruit</th>
<td>apples</td>
</tr>
<tr>
<th rowspan="2">Types</th>
<td>pink lady</td>
</tr>
<tr>
<td>golden delicious</td>
</tr>
</table>
Once you have your table borders and cells all set, you can focus on how your text looks. If you don't want headers you can simply use <td> instead of <th>:
| apples | cherries | pears |
| pink lady | rainier | d'anjou |
| golden delicious | bing | bartlett |
Finally if you want to combine what you just learned and create a list within a table, you can!
<table border="1"><tr>
<th>Fruit</th>
</tr>
<tr>
<td>apples:
<ul>
<li>pink lady</li>
<li>golden delicious</li>
</ul>
</td>
</tr>
<tr>
<td>cherries:
<ul>
<li>rainier</li>
<li>bing</li>
</ul>
</td>
</tr>
<tr>
<td>pears:
<ul>
<li>d'anjou</li>
<li>bartlett</li>
</ul>
</td>
</tr>
</table>
| Fruit |
|---|
apples:
|
cherries:
|
pears:
|
You can even create a table within a table!
<table border="1" cellpadding="5">
<tr>
<th>Fruit</th>
</tr>
<tr>
<td>apples:
<table border="1">
<tr>
<td>pink lady</td>
<td>golden delicious</td>
</tr>
<tr>
<td>gala</td>
<td>mcintosh</td>
</tr>
</table>
</td>
</tr>
</table>
| Fruit | ||||
|---|---|---|---|---|
apples:
|
As you can see I added cellpadding to the main table, so you can see the table in the cell better. You can mix and match all of the things you've learned above to create the right table for your site. Need a site so you can use what you just learned? Get started with Dynadot! Each of our domains comes with free one page hosting - the perfect place to hone your HTML skills. Find your domain name today!
*Please note that some of the HTML above, including the types of bullets in ordered and unordered lists, is considered deprecated and has been superseded by alternatives that will be covered in later posts. Most browsers continue to support deprecated HTML, but this is not guaranteed in the future.
Post by Robyn Norgan
