HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)
Chapter 6: Creating unordered lists, ordered lists, and tables
Making a list in HTML is pretty simple and after you do it once you'll have it down pat. First we'll make an unordered list. This is just a list with bullets. Let's clean up our HTML a little bit first. Delete some of the elements until your only left with this.
<!doctype html>
<html>
<head>
<title>Main Page</title>
</head>
<body>
<img src="image.jpg">
</body>
</html>
And now inside the body element add this code after your image element and then we'll break it down piece by piece like normal.
<!doctype html>
<html>
<head>
<title>Main Page</title>
</head>
<body>
<img src="image.jpg">
<ul>
<li>Football</li>
<li>Baseball</li>
<li>Basketball</li>
</ul>
</body>
</html>
¨The first line is just a comment to give you a little more practice using them.
¨<ul> This is the unordered list opening tag.
¨<li>Football</li> This is a list element. It is put inside of the unordered list element. In this example with have three list items that we specified with the <li> list item tags.
¨</ul> And finally we close the unordered list.
It's as simple as that. You can add, delete, or alter any list items you want when you need to make changes. When you save and run in your browser you can see that an unordered list has bullets before each list item. They are added by default. Even something simple like these bullets are controlled by the designer. You can change the style of the bullets instead of using the default circular style or remove them completely if you want. This can all be done very simply using CSS code. You will use the list element for many other things besides just a list. For example one common use is for creating a navigation menu at the top of your page.
Creating An Ordered List/Numbered List
The code for creating an ordered list is exactly the same as the code for an unordered list except we use the <ol></ol> tags instead of the <ul></ul> tags. And this list will give you numbers instead of bullets. Tip, Just copy and paste the unordered list code and change the u's to o'sin the <ul></ul> tags. You'll find that the more code you add to your HTML documents, the less typing you'll actually have to do. A lot of it is just copy, paste, and edit. And you'll end up creating entire websites this way for most of the content. Most coders with experience have a lot of things like headers, navigation bars, footers, and anything else you could think of already created, tested, and saved somewhere that they can just copy and paste parts of them into their new web pages and website's. So they basically make themselves templates for everything that they now they are going to use over and over again. This saves a huge amount of time when making multiple website's. So if you add this code under your unordered list element you can see an example:
<!--This is an ordered list-->
<ol>
<li>Football</li>
<li>Baseball</li>
<li>Basketball</li>
</ol>
One last thing that I want you to notice in the code for these two lists is how I indented the <li> list elements. You can see how if you had a 100 lines of code how this would be easier to find and read. It's a lot clearer than if you just had everything start right at the left of your screen. As you code more you'll find your own system for how you like your code organized. But this is what I do. Okay so go ahead and save/run your code. And now you've created both a bullet list and a numbered list.
Creating A Table
Now that we have our two lists the last thing I want to show you in this chapter is how to create a table because it's very similar to how we made our lists except we'll have columns and rows. FYI, rows are left to right (horizontal) and columns are up and down (vertical). That used to trip me up when I first started coding. I can't tell you how many times that I made a table the opposite way I wanted to. Which brings up the point again of how important it is to save and run your code often. Even when your in the middle of creating an element that contains a lot of code. For example if you are creating a table that has many rows and columns and accidentally entered your table information in the wrong way, it would really be a pain to go back and change all of your code to fix the mistake. It's better to catch things like this early. Trust me it will save you a lot of headache. So under your ordered list go ahead and add this code:
<!--This is our table-->
<table>
<tr>
<th>Meats</th>
<th>Fruits</th>
<th>Desserts</th>
</tr>
<tr>
<td>Bacon</td>
<td>Banana</td>
<td>Chocolate cake</td>
</tr>
</table>
¨<table> First the opening table tag tells the browser that this is a table. Above this tag is just a comment for us to view only. Remember comments will not display on the web page.
¨<tr> Then the table row opening tag starts a row. Remember this will display left to right.
¨<th></th> These are the table header tags. So this is where we put the header for each row. They will also display from left to right. And the table header element is inside of the table row element. In our exercise we have three table header elements.
¨</tr> Then we close the table row for our headers.
¨<tr> We add a new row to start adding our data.
¨<td></td> Add the table data tags with the data to be displayed from left to right for all three table data elements.
¨</tr> Then we close out this row.
¨</table> And Finally we close the entire table.
Now when you run this in your browser you'll notice a few things. The browser will automatically bold and center your table headers. It will center a header based off of the largest data element in the column. So as you can see the last column's header is pushed farther to right because of the size of the data underneath it. You can also see that there are no walls or borders. They are there but are invisible at the moment. We can make them visible by using tag attributes directly in HTML. Add this to your opening table tag that we just created:
<table border="1" style="width:100%">.
When you run you'll see that you get a border that spans the width of your web page. If you change value in your width property to 50% you will get a table that spans exactly half of your page. You can play around with the size to get the result you want. To adjust the thickness of your border you can change the value in your border property from 1 to 2 or whatever you want. Note that this number is a pixel value. I'm not gonna get into styling in this way too much because this way of styling is pretty much old news. Nowadays we use CSS for pretty much all of our styling needs. But I just wanted to give you an example.
Adding more rows is simple. Just copy and paste and change the content. For example add this right under your closing table data row tag </tr>:
<tr>
<td>Bacon</td>
<td>Banana</td>
<td>Chocolate cake</td>
</tr>
<tr>
<td>Ham</td>
<td>Pineapple</td>
<td>Yogurt</td>
</tr>
</table>
You can add as many rows as you want. Your table could be 5 columns wide and 200 rows long. It's up to you. Before we finish up with this table exercise I want to introduce you to one more HTML element that you can use for your tables. And that is the caption element. This just defines a caption for our table. Add this code immediately after the opening table tag line. <caption>Foods</caption>. Now if you run this new code you'll see that our table has a centered caption right above the top border. You might be thinking why did we put this code after we started the table if HTML is read from top to bottom. And that is because this element is specifically embedded into our table element. So if we moved our table to a different position the caption element would move with it. But if we used a <h1> element for example to create a heading for our table. We would have to put that immediately before our opening <table> tag. Then we would have to add code to center it and if we moved our table position on our page we also have to move our <h1> element as well. The caption tag specifically defines a table caption. Also it can only be added once per table. That's about it for this chapter and again when we get into CSS we'll be able to align the text in our table cells, color the table border, change the font style and many other things.
Quiz Chapter 6
1.What is the main difference between an unordered list and an ordered list?
2.What tags do you use to add a list item?
3.What are each of these tags used for? <table>,<th>, <tr>,</td>.
4.In what direction is a table row displayed?
5.What is the use of the caption element and where do you enter the code for it?