HTML Basics III Reference Guide:Mr. Kay, Engineering & Design

  1. What are tables:

Tables are very useful. We use them to store tabular data so it is easy to read! When you want to present information neatly in a table with rows and columns—you guessed it—the <table> tag is what you need.

There are many tags associated with tables, but it all starts with the <table> tag, so let's add that first.

  1. Add an opening and closing set of <table> tags to the body of this HTML document.
  2. Go to the Result view. You'll notice that nothing visible was added. That's because our table's not populated yet! We'll learn how to do that soon.

Code:

<html>

<head>

<title>Table Time</title>

</head>

<body>

<table>

</table>

</body>

</html>

  1. Rows of information:

A table is just a bunch of information arranged in rows and columns.

We use the tr tag to create a table row. We'll learn how to create columns shortly, and everything will start to come together. (You don't really create columns in tables: instead, you tell each row how many cells to have, and that determines your number of columns).

We'll get to the details of table cells in a minute. In the meantime, we've added a set of tr/tr> tags to the table on line 9, creating a table row.

Add two more rows to the table on line 11 and line 12.

Code:

<html>

<head>

<title>Table Time</title>

</head>

<body>

<table>

<tr</tr>

<!-- Add two more rows below this! -->

<tr</tr>

<tr</tr>

</table>

</body>

</html>

  1. Adding a single column

Look at the HTML now. Can you tell that there are still three rows? We've added a little more whitespace to make it easier to deal with table columns and table data.

We've added a single <td> ("table data") cell to the first row, essentially creating a single column. If you view the Result tab now, you'll see that we've drawn a border around it. it's not that impressive, but don't worry: we're about to add more table data cells.

We're starting to add a lot of HTML elements now. Make sure to indent your tags as you nest them so you don't get confused!

  1. In the second row, add a table data (<td</td>) cell and type Two between the tags.
  2. In the third row, add another cell with Three between the tags.
  3. Go to the Result view. You can see that we have 1 column with 3 rows, and each row contains exactly one cell.

Code:

<html>

<head>

<title>Table Time</title>

</head>

<body>

<table border="1px">

<tr>

<td>One</td>

</tr>

<tr>

<td>Two</td>

</tr>

<tr>

<td>Three</td>

</tr>

</table>

Gives Results:

One
Two
Three
  1. Adding a second column

It may not have seemed like much, but you just created a single-column table in the last exercise. Nice work!

Now take a look at what we have on our page. Notice in the first table row we now have two table data cells.

Adding a second table data cell has the effect of adding a second table column, although if you go to the Result view, it may look funny because only the first row has two cells. Let's fix that!

  1. Add to the second row a table data cell with the value 1897
  2. Add to the third row a table data cell with the value 1935
  3. Check out the Result view. We now have a total of 2 columns and 3 rows, and each row has 2 cells.
  4. Sweet! We now have a basic table. Go on to the next section to find out how to add a header and a title to our table.

Code:

<html>

<head>

<title>Table Time</title>

</head>

<body>

<table border="1px">

<tr>

<td>King Kong</td>

<td>1933</td>

</tr>

<tr>

<td>Dracula</td>

<td>1897</td>

</tr>

<tr>

<td>Bride of Frankenstein</td>

<td>1935</td>

</tr>

</table>

</body>

</html>

Gives the following results:

King Kong / 1933
Dracula / 1897
Bride of Frankenstein / 1935
  1. Head of the Table

Here's the table we made earlier. It's okay, but it just looks like we have a list of famous Hollywood people (monsters?) and their birth years. To make our table look a little more like a table, we'll use the thead and tbody tags. These go within the table tag and stand for table head and table body, respectively.

The head HTML tag contains information about a web page (e.g. its title) and the body tag contains the contents of the web page. In the same way, the thead tag can be thought of as containing information about a table and the tbody tag containing the actual tabular data.

Since everything we currently have is just tabular data, put everything we have in our table so far between a set of tbody/tbody> tags. We'll add the table head next!

Code:

<html>

<head>

<title>Table Time</title>

</head>

<body>

<table border="1px">

<tbody>

<tr>

<td>King Kong</td>

<td>1933</td>

</tr>

<tr>

<td>Dracula</td>

<td>1897</td>

</tr>

<tr>

<td>Bride of Frankenstein</td>

<td>1935</td>

</tr>

</tbody>

</table>

</body>

</html>

  1. Invisible Head:

You'll notice now that we added a <thead> tag above the <tbody>. This works much the same way as <tbody> in that you can add rows to a <thead>.

Why learn <thead> or <tbody> if nothing visible changes? Well, it's a good idea to separate a table into head and body because it will help us style the table in CSS, which you'll learn very soon!

  1. Add a single row (with the <tr>) within the table heading section.
  2. Within this row, add two table header cells with the values Famous Monster and Birth Year. (If table data cells were made with <td>, how do you think you can make table header cells? Check the Hint if you need help.)

Code:

<html>

<head>

<title>Table Time</title>

</head>

<body>

<table border="1px">

<thead>

<tr>

<th>Famous Monster</th>

<th>Birth Year</th>

</tr>

</thead>

<tbody>

<tr>

<td>King Kong</td>

<td>1933</td>

</tr>

<tr>

<td>Dracula</td>

<td>1897</td>

</tr>

<tr>

<td>Bride of Frankenstein</td>

<td>1935</td>

</tr>

</tbody>

</table>

</body>

</html>

Results:

Famous Monster / Birth Year
King Kong / 1933
Dracula / 1897
Bride of Frankenstein / 1935
  1. Naming Your Table:

Our table is missing a title. We want to add a title row that goes all the way across the top.To do so, we need to use the colspan attribute for the <th> tag. By default, table cells take up 1 column. If we want a table cell to take up the space of 3 columns instead of 1, we can set the colspan attribute to 3. It looks like this:

<th colspan="3">3 columns across!</th>

  1. Go to the Result view. We've added the title row for you, but it only spans 1 column right now.
  2. Make the column span 2 columns with the colspan attribute. Adding the attribute colspan="2" to a <th> tag should do the trick.
  3. Return to the Result view again. Our title spans 2 columns now!

Code:

<html>

<head>

<title>Table Time</title>

</head>

<body>

<table border="1px">

<thead>

<tr>

<th colspan="2">Famous Monsters by Birth Year</th>

</tr>

<tr>

<th>Famous Monster</th>

<th>Birth Year</th>

</tr>

</thead>

<tbody>

<tr>

<td>King Kong</td>

<td>1933</td>

</tr>

<tr>

<td>Dracula</td>

<td>1897</td>

</tr>

<tr>

<td>Bride of Frankenstein</td>

<td>1935</td>

</tr>

</tbody>

</table>

</body>

</html>

Results:

Famous Monsters by Birth Year
Famous Monster / Birth Year
King Kong / 1933
Dracula / 1897
Bride of Frankenstein / 1935
  1. Style that Head

Your table is starting to look great, but it's still a little bland. We've gone ahead and added some styling to the table to make it a bit easier to read. It's your job to add the finishing touches!

Feel free to play around with any of the style attributes we added; you'll learn much more about these things later during the CSS courses.If you want to add more than one style, you just separate your styles with a semicolon, like so:

<th style="font-size:12px; color:red"</th>

  1. Make the "Famous Monster" and "Birth Year" labels emphasized (i.e. make them italicized).
  2. Make the "Famous Monsters by Birth Year" title red.

Code:

<html>

<head>

<title>Table Time</title>

</head>

<body>

<table style="border-collapse:collapse;">

<thead>

<tr>

<th colspan="2"; style="color:red">Famous Monsters by Birth Year</th>

</tr>

<tr style="border-bottom:1px solid black;">

<th style="padding:5px;"<em>Famous Monster</em</th>

<th style="padding:5px;border-left:1px solid black;"<em>Birth Year</em</th>

</tr>

</thead>

<tbody>

<tr>

<td style="padding:5px;">King Kong</td>

<td style="padding:5px;border-left:1px solid black;">1933</td>

</tr>

<tr>

<td style="padding:5px;">Dracula</td>

<td style="padding:5px;border-left:1px solid black;">1897</td>

</tr>

<tr>

<td style="padding:5px;">Bride of Frankenstein</td>

<td style="padding:5px;border-left:1px solid black;">1944</td>

</tr>

</tbody>

</table>

</body>

</html>

Results:

Famous Monsters by Birth Year
Famous Monster / Birth Year
King Kong / 1933
Dracula / 1897
Bride of Frankenstein / 1944
  1. Divide and Conquer

One of the most versatile structure tags available to you is the div/div> tag. Short for "division," div allows you to divide your page into containers (that is, different pieces). This will come in handy when you begin learning CSS in the next unit: you'll be able to style different parts of your website individually!

Check out the Result tab. You should see three blocks: one red, one blue, and one green. Each one is its own div container. Now you try! On line 10, create your own div and give it the background-color yellow. Use the width and height syntax we've used for the other divs as a guide.

Code:

<!DOCTYPE html>

<html>

<head>

<title>Result</title>

</head>

<body>

<div style="width:50px; height:50px; background-color:red"</div>

<div style="width:50px; height:50px; background-color:blue"</div>

<div style="width:50px; height:50px; background-color:green"</div>

<div style="width:50px; height:50px; background-color:yellow"</div>

</body>

</html>

Results: (Won’t show)

  1. Unordered Lists:

Nice work! As you can probably guess, the smart use of divs will eventually allow you to create visual HTML objects like sidebars, menus, and more. Just like with images, you can make divs clickable by wrapping them in a/a> tags. Go ahead and make your yellow div link to your favorite site! Check the Hint if you need a refresher.

Remember, the a/a> tags go around the thing you want to make a link, like so:

ahref="website address"div/div</a

Code:

<!DOCTYPE html>

<html>

<head>

<title>Result</title>

</head>

<body>

<div style="width:50px; height:50px; background-color:red"</div>

<div style="width:50px; height:50px; background-color:blue"</div>

<div style="width:50px; height:50px; background-color:green"</div>

<a href=" style="width:50px; height:50px; background-color:yellow"</div>

</a>

</body>

</html>

  1. Spantastic

While div allows you to divide your webpage up into pieces you can style individually, span allows you to control styling for smaller parts of your page, such as text. For example, if you always want the first word of your paragraphs to be red, you can wrap each first word in span/span> tags and make them red using CSS!

For now, we'll continue to use the style attribute to change colors. Wrap the word "red" in the editor in span/span> tags and give the span tag style="color:red". Notice how only the word between the span/span> tags changes color!

Code:

<!DOCTYPE html>

<html>

<head>

<title</title>

</head>

<body>

<p>This text is black, except for the word <span style="color:red">red</span>!</p>

</body>

</html>

Results:

This text is black, except for the word red!

  1. Span is the man:

Great! You're really getting the hang of this. These tags can be a little tricky, though, so let's go through one more example. Color is just one attribute you can selectively change with span tags; you can also change font size, font family, and any other style attribute you can think of!

Use span tags to change the word "Futura" to the font Futura. Leave the rest of the text as-is—don't include the exclamation point in the span tag!

Code:

<!DOCTYPE html>

<html>

<head>

<title>Result</title>

</head>

<body>

<p>My favorite font is <span style="font-family:Futura">Futura</span>!</p>

</body>

</html>

Results:

My favorite font is Futura!

  1. Recap:Great work! In addition to what you've already learned, you now know how to:
  1. Divide up your webpage for easy styling with <div> tags
  2. Select pieces of text and change their properties using <span> tags

In the next course, we'll see how we can take much of the styling we've been doing—such as controlling font family, font color, and text alignment—and put it in its own separate file. By doing that, we can use tags like <div> and <span> to impart style to our pages without writing style="color:red" every single time!We've given you a taste of how <span> can be powered by CSS in the editor. Check it out on the Result tab. Cool, huh?

Code:

<!DOCTYPE html>

<html>

<head>

<title>Ye Olde Fancye Booke</title>

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

</head>

<body>

<h3>Ye Olde Storye</h3>

<p<span>A</span> long time ago there was an intrepid young student who wanted to learn CSS...</p>

</body>

</html>

stylesheet.css

p {

font-family:Garamond;

font-size:16px;

}

h3 {

font-family:cursive;

color:#36648b;

text-align:center;

}

span {

color:#cc0000;

font-size:24px;

}

Results:

Ye Olde Storye

A long time ago there was an intrepid young student who wanted to learn CSS...

  1. Tables are not just for data:

Great! Now we'll need three cells per row (to get nine cells altogether). Add three table cells per row to get a total of nine cells.

Code:

<!DOCTYPE html>

<html>

<head>

<link type="text/css" rel="stylesheet" href="stylesheet.css" />

<title>My Photo Page</title>

</head>

<table>

<tr<td</td<td</td<td</td</tr>

<tr<td</td<td</td<td</td</tr>

<tr<td</td<td</td<td</td</tr>

</table>

<body</body>

</html>

Good work! Next up: find nine pictures. You can use any image links you like! If you can't think of any, try searching "stock photo" using your favorite search engine. Remember, img tags are one of the few tags in HTML that are self-closing. This means that instead of

imgsrc="URL"/imgyou should type imgsrc="URL"/>

This is because nothing goes between the opening img tag and the closing one, so you can safely open and close it with a single tag. Insert an img/> between each set of td/td> tags. Make sure to set each src attribute to the image URL you want the picture to be of!

Code:

<!DOCTYPE html>

<html>

<head>

<link type="text/css" rel="stylesheet" href="stylesheet.css" />

<title>My Photo Page</title>

</head>

<table>

<thead<th colspan="3">Mr. Kay's Pics</th</thead>

<tr<td<img src=" src=" src="

<tr<td<img src=" src=" src="

<tr<td<img src=" src=" src="

</table>

<body</body>

</html>

Results in the following: (Can’t show in word)

  1. Link them up:

Perfect! Now you just need to wrap each img tag in a/a> tags. Remember to give each a tag a href attribute and set it equal to the web address you want your link to go to! (Check the Hint if you're stuck.)Put a/a> tags around each img tag. There's no need to make your imgsrc attributes and ahref attributes point to the same web address—in fact, we encourage you to make them different!

Do you remember how a tags work?

ahref="website address"/a

Code:

<html>

<head>

<link type="text/css" rel="stylesheet" href="stylesheet.css" />

<title>My Photo Page</title>

</head>

<table>

<thead<th colspan="3">Mr. Kay's Pics</th</thead>

<tr<td<a href=" src="

<td<a href=" src="

<td<a href=" src="

</tr>

<tr<td<a href=" src="

<td<a href=" src="

<td<a href=" src="

</tr>

<tr<td<a href=" src="

<td<a href=" src="

<td<a href=" src="

</tr>

</table>

<body</body>

</html>

Results: Can’t show in word.