Images & Tables - HTML5 Tutorial 6

Images

Wouldn't it be great if you could have an image of actor and music legend David Hasselhoff right in the centre of your page?

That sounds like a bit of a challenge...

Maybe, but in fact it is pretty easy to do. All you need are two elements:

Example 1:

 
 <figure>
   <img src="david.jpg" alt="David">
 </figure>
 
 

Would look like this in the browser:

All you need do is first tell the browser that you want to insert a figure, which is an image (img) and then where it is located (src, short for "source"). Do you get the picture?

Notice how the img element is opened and closed using the same tag. Like the <br> tag, it is not tied to a piece of text.

"david.jpg" is the name of the image file you want to insert in your page. ".jpg" is the file type of the image. Just like the extension ".htm" shows that a file is an HTML document, ".jpg" tells the browser that a file is a picture. There are many different types of image file types you can insert into your pages, the most important ones are:

• GIF (Graphics Interchange Format)
• JPG or JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)
• SVG (Scalable Vectors Graphic)

GIF images are usually best for graphics and drawings, while JPEG images are usually better for photographs. This is for two reasons: first, GIF images only consist of 256 colours, while JPEG images comprise of millions of colours and second, the GIF format is better at compressing simple images, than the JPEG format which is optimized for more complex images. The better the compression, the smaller the size of the image file, the faster your page will load. As you probably know from your own experience, unnecessarily 'heavy' pages can be extremely annoying for the user.

Traditionally, the GIF and JPEG formats have been the two dominant image types, but lately, the PNG format has become more and more popular (primarily at the expense of the GIF format).The PNG format contains in many ways the best of both the JPEG and GIF format: millions of colours and effective compressing.

An SVG graphic takes things a step further — it lets you have many levels to your graphic, like a level for text in the graphic (which means it too is good for illustrations), or animation, or even interactivity.

Where do I get my images from?

To make your own images, you need an image editing program. An image editing program is one of the most essential tools you need to create beautiful websites.

There are so many good image editors out there that you basically have your pick. Picasa or Gimp both are free. Or if you need really professional pictures, consider investing in either Paint Shop Pro, Adobe PhotoShop or Adobe Lightroom.

You can also just borrow images from other sites by downloading them. But please be careful not to violate copyrights when downloading pictures. Still, it's useful to know how to download pictures, so here's how you do it:

1. Right-click on an image on any image on the Internet.
2. Choose "Save image as..." in the menu that appears.
3. Choose a location for the image on your computer, name it and click "Save".

Do this with the image below and save it on your computer at the same location as your HTML documents. (Notice that the logo is saved as a PNG file: logo.png):

Now you can insert the image into one of your own pages. Try it yourself.

Is that all I need to know about images?

There are a few more things you should know about images.

First, you can easily insert pictures located in other folders, or even pictures that are located on other websites:

Example 2:

 
 <figure>
   <img src="images/logo.png">
 </figure>
 
 

Example 3:

 
 <figure>
   <img src="http://www.html.net/logo.png">
 </figure>
 
 

Second, images can also be links:

Example 4:

 
 <figure>
   <a href="http://www.programmervshacker.co.vu" >
     <img src="logo.png">
   </a>
 </figure>
 
 

will look like this in the browser (try clicking on the image):

Are there any other attributes I should know about?

You always need to use the attribute src, which tells the browser where the image is located. Besides that, there are a number of other attributes which can be useful when inserting images.

The alt attribute is used to give an alternate description of an image if, for some reason, the image is not shown for the user. This is especially important for users with impaired vision, or if the page is loaded very slowly. Therefore, always use the alt attribute:

Example 5:

 
 <figure>
   <img src="logo.png" alt="programmervshacker logo">
 </figure>
 
 

It is still a good idea to use the width and height attributes because the browser will then be able to detect how much space the image will need in the final page layout before the image is fully downloaded. This allows your browser to set up the page nicely in a quicker way.

That's enough about David Hasselhoff and images for now.

Tables

Tables are used when you need to show "tabular data" i.e. information that is logically presented in rows and columns.

Is it difficult?

Building tables in HTML may at first seem complicated but if you keep cool and watch your step, it is actually strictly logical - just like everything else in HTML.

Example 1:

 
 <table>
   <tr>
     <td>Cell 1</td>
     <td>Cell 2</td>
   </tr>
   <tr>
     <td>Cell 3</td>
     <td>Cell 4</td>
   </tr>
 </table>
 
 

Will look like this in the browser:

Cell 1	Cell 2
Cell 3	Cell 4

What's the difference between <tr> and <td> ?

As you will see from the above example, this is probably the most complicated HTML example we have given you so far. Let's break it down and explain the different tags:

3 different elements are used to insert tables:

• The opening tag <table> and the closing tag </table> starts and ends the table. Logical.
• <tr> stands for "table row" and starts and ends horizontal rows. Still logical.
• <td> is short for "table data". This tag starts and ends each cell in the rows of your table. All simple and logical.

Here is what happens in Example 1: the table starts with a <table>, followed by a <tr>, which indicates the beginning of a new row. Two cells are inserted in this row: <td>Cell 1</td> and<td>Cell 2</td>. The row is hereafter closed with a </tr> and a new row <tr> begins immediately after. The new row also contains two cells. The table is closed with </table>.

Just to make it clear: rows are horizontal lines of cells and columns are vertical lines of cells:

Cell 1	Cell 2
Cell 3	Cell 4

Cell 1 and Cell 2 form a row. Cell 1 and Cell 3 form a column.

In the above example, the table has two rows and two columns. However, a table can have an unlimited number of rows and columns.

Example 2:

 
 <table>
   <tr>
     <td>Cell 1</td>
     <td>Cell 2</td>
     <td>Cell 3</td>
     <td>Cell 4</td>
   </tr>
   <tr>
     <td>Cell 5</td>
     <td>Cell 6</td>
     <td>Cell 7</td>
     <td>Cell 8</td>
   </tr>
   <tr>
     <td>Cell 9</td>
     <td>Cell 10</td>
     <td>Cell 11</td>
     <td>Cell 12</td>
   </tr>
 </table>
 
 

Will look like this in the browser:

Cell 1	Cell 2	Cell 3	Cell 4
Cell 5	Cell 6	Cell 7	Cell 8
Cell 9	Cell 10	Cell 11	Cell 12

Are there any attributes?

Of course there are attributes. For example, the border attribute is used to specify that you want a border around your table:

Example 3:

 
 <table border="1">
   <tr>
     <td>Cell 1</td>
     <td>Cell 2</td>
   </tr>
   <tr>
     <td>Cell 3</td>
     <td>Cell 4</td>
   </tr>
 </table>
 
 

Will look like this in the browser:

Cell 1	Cell 2
Cell 3	Cell 4

You can also add column headings:

Example 4:

 
 <table border="1">
   <tr>
     <th>Heading 1</th>
     <th>Heading 2</th>
   </tr>
   <tr>
     <td>Cell 1</td>
     <td>Cell 2</td>
   </tr>
   <tr>
     <td>Cell 3</td>
     <td>Cell 4</td>
   </tr>
 </table>
 
 

This example will be displayed in the browser as a table with two column headings. Try it yourself.

What can I insert in my tables?

Theoretically, you can insert anything in tables: text, links and images... BUT tables are meant for presenting tabular data (i.e. data which can be meaningfully presented in columns and rows) so refrain from putting things into tables simply because you want them to be placed next to each other.

In the old days on the Internet - i.e. a few years ago - tables were often used as a layout tool. But if you want to control the presentation of texts and images there is a much cooler way to do it (hint: CSS). But more about that later.

Once you have mastered tables, nothing in HTML can faze you. So go practice making tables from scratch — some with headings, some without — that should keep you busy for hours.

What is left then?

The two attributes colspan and rowspan are used when you want to create fancy tables.

Colspan is short for "column span". colspan is used in the <td> tag to specify how many columns the cell should span:

Example 1:

 
 <table border="1">
   <tr>
     <td colspan="3">Cell 1</td>
   </tr>
   <tr>
     <td>Cell 2</td>
     <td>Cell 3</td>
     <td>Cell 4</td>
   </tr>
 </table>
 
 

Will look like this in the browser:

Cell 1
Cell 2	Cell 3	Cell 4

By setting colspan to "3", the cell in the first row spans three columns. If we instead had setcolspan to "2", the cell would only have spanned two columns and it would have been necessary to insert an additional cell in the first row so that the number of columns will fit in the two rows.

Example 2:

 
 <table border="1">
   <tr>
     <td colspan="2">Cell 1</td>
     <td>Cell 2</td>
   </tr>
   <tr>
     <td>Cell 3</td>
     <td>Cell 4</td>
     <td>Cell 5</td>
   </tr>
 </table>
 
 

Will look like this in the browser:

Cell 1		Cell 2
Cell 3	Cell 4	Cell 5

What about rowspan?

As you might already have guessed, rowspan specifies how many rows a cell should span over:

Example 3:

 
  <table border="1">
   <tr>
     <td rowspan="3">Cell 1</td>
     <td>Cell 2</td>
   </tr>
   <tr>
     <td>Cell 3</td>
   </tr>
   <tr>
     <td>Cell 4</td>
   </tr>
 </table>
 
 

Will look like this in the browser:

Cell 1	Cell 2
	Cell 3
	Cell 4

In the example above rowspan is set to "3" in Cell 1. This specifies that the cell must span over 3 rows (its own row plus an additional two). Cell 1 and Cell 2 are thereby in the same row, while Cell 3 and Cell 4 form two independent rows.

Confused? Well, it is not uncomplicated and it is easy to lose track. Therefore, it might be a good idea to draw the table on a piece of paper before you begin with the HTML.

Not confused? Then go ahead and create a couple of tables with both colspan and rowspan on your own.

Browse More Articles

Tweet

Written by Unknown

Unknown is one of the Team Member of Programmer vs Hacker. He has written many articles on this website and is a patner of this website.