Lesson 16 - Styling tables and photo gallery in HTML and CSS

In the previous lesson, Creating subpages and a contact form, we started finishing up each individual subpage on our site. In today's lesson, we're going to finish the website entirely.

Skills

The skills subpage is almost ready now. The first thing we'll do to it now is add the layout to it, as we did in the last lesson with the contact subpage.

Since we now know how to use CSS properly, we'll go ahead and style the table. First of all, we'll give it an ID, which can simply be "skills". The main issue here is that the columns (cells) in our table are don't have the same width. It may look like they do, but in reality, the only reason they are like that is because the texts in cells have similar lengths. Try to adding some more text into one of the cells, it will expand. Let's set a width of 33% to every cell and add some padding:

#skills td {
    width: 33%;
    padding: 20px;
}

The result:

As you can see, the contents of our table cells are centered vertically by default. Leaving it like this wouldn't fit our design since we want all of the headings to have the same height and to be aligned at the top. We'll have this apply to all of the cells using the vertical-align CSS property with the value set to "top":

vertical-align: top;

If we wanted to, we'd be able to center the content vertically in the same way by setting the value to "middle", and to align to the bottom, we'd set it to "bottom". Remember that this property only works for tables! This is once again, another positioning issue in CSS.

Now let's go over how to style the table border. We do it sort of like how we style the border for other elements. The main difference being that tables have a double border. Let's try and set the border for every single table cell, using the same selector. We'll make it gray and 1px wide:

border: 1px solid gray;

The result:

As you can see, it's not exactly what we wanted. What we'll have to do is merge borders into a single one using the border-collapse property and set the value to "collapse". We'll have to set it for the entire table:

#skills {
    border-collapse: collapse;
}

The result is as desired now.

The last issue that we will have to address in regards to our table is the uncentered images in the first row. We'd like to center the very first row's content and leave the other rows' content as is (long centered text is hard to read). There are several ways of doing this, but the easiest way is to assign the "center" class to the first table row:

...
<table id="skills">
    <tr class="center">
        ...

That's it! One down, one to go:

References

As for the references page, we'll create a short image gallery of applications and webpages we created. You'll surely find the image gallery not only useful for images of your work but also for photos of you and so on. I will borrow several images from sample applications from other programming language courses we have available:

Image gallery

We'll start by adding a thumbnail to each image. It'd be a big mistake to display previews as large images since it would take longer to download. To fix this, open your favorite graphic editor (GIMP, PhotoShop, ...) and resize your images to 128px height and save them with the "_thumbnail" suffix.

We'll create the references.html subpage in the same that we created all of the other subpages - by copying the index file. We'll add some text and the div for the thumbnails:

<p>You can find some of my projects below. I am also available to provide you with my programming services.</p>

<div id="references">
    <a href="images/calculator_java.png" title="Java calculator"><img src="images/calculator_java_thumbnail.png" alt="Java calculator" /></a>
    <a href="images/mines_pascal.png" title="Pascal mines"><img src="images/mines_pascal_thumbnail.png" alt="Pascal mines" /></a>
    <a href="images/hobi_web.png" title="HTML and CSS website"><img src="images/hobi_web_thumbnail.png" alt="HTML and CSS website" /></a>
</div>

There is nothing complicated about the code up above. We added a div for the thumbnails, which are set one under the other. Each thumbnail links to the original (full-size) image. We set the title attribute to links, which can be set to any HTML element and is displayed when you hover your mouse over the element:

Let's add some style to our gallery using CSS, for which we've added an ID (as you may have noticed). We'll set the border, the padding, the margin, and the shadow for the gallery images:

#references img {
    border: 1px solid gray;
    padding: 6px;
    box-shadow: 3px 3px 6px #999999;
    margin-right: 6px;
}

The result:

It looks much better this way, right? If we click on a thumbnail, the full-size image will be displayed. However, the effect is kind of ugly. The entire website disappeared and the image is placed in the top left corner, in an empty page. Let's go over how to improve on this design.

Lightbox

Lightbox is the web plugin written in the JavaScript language. JavaScript is mostly used for dynamic web plugins such as pop-up windows with gallery images as you may know from many popular websites. JavaScript is used for the navigation menu on ICT.social.

The project is free and is available at http://lokeshdhakar.com/…ts/lightbox2. Download the archive with the project that contains a js file, an image, and css files. Extract it into your website folder. Then, as we have to link CSS files in HTML, we'll have to link the script in order for it to be executed. Now, add the following links to the lightbox scripts and styles, to your references subpage's HTML head:

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

Then, add the following right before the </body> tag:

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/lightbox.js"></script>

Now, let's add the data-lightbox attribute to each of the gallery images with the value set to "references" (the name of the gallery):

...
<a href="images/calculator_java.png" title="Java calculator" data-lightbox="references"><img src="images/calculator_java_thumbnail.png" alt="Java calculator" /></a>...

Refresh the page and click on a thumbnail. The result is very impressive:

If you add the data-attribute (and the links to the Lightbox files) to any image link of any subpage, they'll open in Lightbox. Also, if you set the gallery's name in brackets, Lightbox will treat the images as a collection and let you switch between them using your mouse or arrow keys (you can see in our example).

With what you know, you will easily be able to finish the "About me" subpage on your own. Our website is done! In the next lesson, Solved tasks for HTML and CSS lessons 14-16, we'll show you how to upload the website to a web host, and how to choose a web host based off of your specific needs. The website in its entirety is available for download in the attachment below.

In the following exercise, Solved tasks for HTML and CSS lessons 14-16, we're gonna practice our knowledge from previous lessons.

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.