Basic Tables
The <table> Element
The <table> element is a powerful tool for web designers:
Tables allow us to display information in a predictable and uniform
fashion on a web page.
Tables are well suited for presenting data that conforms to rows and
columns.
Content in table cells is easy to format consistently.
In the past, tables were often used to lay out and organize an entire web
page. This was a misuse of the <table> element, which should be used only
to present specific information within a page's overall content.
Rows and Columns
Row
Column
This simple table has two columns
and three rows.
Building an XHTML Table
<table>
<tr>
<td></td> <table> </table> Establishes the table on the web page.
<td></td>
</tr> Defines a new table row, which spans
<tr>
<tr> </tr>
the available width of the table.
<td></td>
<td></td> Defines a cell of table data within a row.
</tr> The <td> cells will evenly share the
<tr>
<td> </td> horizontal space in a row. If there is
<td></td> just one <td> element in a row, it will
<td></td> use the entire width available.
</tr>
</table> In this code, we have created a table and defined
three table rows, each with two cells of table data
(i.e. two columns).
If we loaded this in a browser, nothing would show on the page, as we have only
created the structure of the table but haven't yet populated the table with any data.
Adding Table Data
<table>
<tr>
<td>State</td>
<td>Capital</td>
</tr>
<tr>
<td>Arizona</td>
<td>Phoenix</td>
</tr>
<tr>
<td>Georgia</td>
<td>Atlanta</td>
</tr>
</table>
Here we have added meaningful data to the table and it is displayed on our
web page, though the table is not very visually appealing.
Defining a Border
<table border="1">
<tr>
<td>State</td>
<td>Capital</td>
</tr>
<tr>
<td>Arizona</td>
<td>Phoenix</td>
</tr>
<tr>
<td>Georgia</td>
<td>Atlanta</td>
</tr>
</table>
By adding the border="1" attribute to the table element, browsers will display
the table with vertical and horizontal borders around each cell. This makes
the table a bit easier to view.
Specifying Table Headers
<table border="1">
<tr>
<th>State</th>
<th>Capital</th>
</tr>
<tr>
<td>Arizona</td>
<td>Phoenix</td>
</tr>
<tr>
<td>Georgia</td>
<td>Atlanta</td>
</tr>
</table>
If the text in our top row is meant to serve as column labels for the data below,
we can use the <th> ("table header") element instead of regular <td>
elements. This informs the browser to automatically bold and center the text.
Table headers can also be placed down the first column to label the row contents.
Table Styling
Though somewhat improved, this table still lacks visual appeal on the page.
In order to fully control how the table appears, we will need something more
powerful than XHTML. That something is CSS, which we will get our first look
at in the next lesson.
Active Learning Exercise 1
1. Which of these tags belong to table?
<thead>,<body>,<tr>
<table>,<head>,<tfoot>
<table>,<tr>,<td>
<table>,<tr>,<tt>
2. Which of the following tags gives a caption to the table?
<caption>
<head>
<heading>
None of these
3. Which of the following is used to specify the beginning of a table’s row?
<td>
<tr>
<row>
<tt>
Active Learning Exercise 1
4. HTML tag for row is
<colspan>
<tr>
<rowspan>
<td>
5. Which tag is used to add columns in the tables?
<colspan>
<td>
<tr>
None of these
6. In order to add border to a table, border attribute is specified in
which tag?
<th>
<table>
<td>
Active Learning Exercise 1
7. The attribute used to set the border color of a table is
border
bordercolor
color
border color
8. Which one of the following is not an option for aligning data in a table?
right
left
Center
Justify
9. Which attribute of the < table > tag is used to set an image in the
background of a table?
bgcolor
background
frame
rules
Images
The <img> Element
To place an image on our web page, we use the self-closing <img> element:
<img src="double-rainbow.jpg" alt="Double Rainbow Photo" />
The src attribute ("source") is The alt attribute ("alternative text") is
required and supplies the name and required and determines what text will
location of the image file we wish to display on the web page if the image
display. If no path is specified, the file is not available. This is also what
browser will expect the file to be in screen readers for the visually
the same folder as the current web impaired will use, so we should try to
page. be accurate and succinct in our
description.
It's a good habit to name all image files with lowercase letters and to use underscores
or dashes instead of spaces.
<img> Dimensions on Screen
If we insert an image without specifying its dimensions, the browser will display
the image in its original size, which might not be what we intended:
<h1>Vacation Photos</h1>
<p>Here is a photo I took from our hotel balcony:</p>
<img src="double-rainbow.jpg" alt="Double Rainbow Photo" />
The original dimensions of this
image are 1600px (pixels)
wide by 1200px high. Since
this Firefox browser screen is
just 1024px wide, the image
doesn't fit and must be
scrolled to be viewed.
To fix this, we need to specify
the dimensions of our image.
Width and Height Attributes
By supplying values for the height and width attributes, we can instruct the
browser to display the image in exactly the size we wish:
<h1>Vacation Photos</h1>
<p>Here is a photo I took from our hotel balcony:</p>
<img src="double-rainbow.jpg" width="400" height="300" alt="Double Rainbow
Photo" />
We must reduce the width and
height in even proportions or
the image will appear distorted.
In this case, we reduced the
original 1600px by 1200x to
400px by 300px.
We can also make a smaller image
appear larger on the page, but this
isn't recommended, as the image
will look pixelated and of poor
quality.
Distorted Image
If we fail to keep the height and width attributes in proportion to the actual photo
dimensions, we'll see an image that is squished vertically or horizontally:
<img src="double-rainbow.jpg" <img src="double-rainbow.jpg"
width="200" height="300" width="400" height="150"
alt="Double Rainbow Photo" /> alt="Double Rainbow Photo" />
Optimizing Images
Web download speeds are much slower than our local hard drive access
speed. Downloading large image files can take a long time and make our web
page slow to load. The solution is to "optimize" our web images by creating
copies in the exact dimensions we display them on our pages.
Here we are using a built-in
Microsoft Windows tool to create
a smaller copy of our original
image. To avoid confusion, we
can append "small_" to the
original file name when saving the
new file.
We can also create a thumbnail
size, which is usually about 100px
to 150px wide, and append
"thumb_" to the file name.
Image File Sizes
Optimizing images by resizing them makes a tremendous difference in the
actual file size. Let's take a look at our three image files:
The original, full-size image file is 265KB, but our smaller version is just 20KB
and the thumbnail version is a tiny 3KB! These smaller versions will load very
quickly on our web page.
Images as Links
Earlier we learned how to create a text link. Turning an image into a link is
straightforward:
<a href="double-rainbow.html">
<img src="double-rainbow.jpg" width="400" height="300" alt="Double
Rainbow Photo" />
</a>
By moving the mouse over the
image, we see that the pointer
changes. The image is now a
live link and if clicked, the user
will go to the page indicated.
This technique could be used, for
example, to create a web photo
album, where the user could
browse a large number of thumbnail
photos and then click on any
individual thumbnail to see a page
with the full-size image.
Image Formats
Images on the web generally come in three common formats. The JPG format is
by far the most common, especially for photos:
Image Extension: .jpg .png .gif
Best suited for: Photographs Logos, Icons Icons, Animations
Color support: Excellent Excellent Limited
Supports transparency*: û ü ü
Supports animation: û û ü
*A transparent image does not show its empty
space as white. Instead, it takes on the underlying
content of the web page. Here we see a JPG image
(no transparency) on the left and a GIF (with
transparency) on the right.
Transparent images are ideal for "stacking" graphics on a page, for example
superimposing a logo image on top of other content.
Active Learning Exercises 2
What are the various image formats supported in
HTML?
Write the HTML code to insert an image with
attributes to set the size of the image to 250 pixels
wide and 400 pixels tall.
Add the correct HTML attribute to display the
"smiley.gif" image.
<img _ _ _ _ _ _ _ />
Write the HTML code to specify an alternate text for
the image.The alternate text should say "Smiley".
<img src=“smiley.jpg”/>.
