Web Design 1 - HTML Lesson 10 - Tables - Part II

Let's create another table

First copy this image and put it in your images folder.

It is 800 pixels wide and 100 pixels high

* Why this size? We are using a simple banner type of logo to go across the top of a page
- too wide and it will force the visitor to scroll back and forth
- too high and it will put your information too far down on the screen

Create a lesson_10.html page

Recall that in lesson 9 you learned the format for the tags:

Tables are defined with the <table> tag.

Tables are divided into table rows with the <tr> tag.

Table rows are divided into table data with the <td> tag.

In the body of the page create a table that has three rows - put the image into the first row and text into the second and third rows

Your code may look like this:

The resulting table on your page may look like this:

Get this part to work before moving on

So, the table you made above works but probably looks a like bit plain. Let's use some styles to change the way it looks.
First turn the background to black and add a border. To do this you just add some style elements to the table tag

<table style="background: #000000; border: 5px solid black">

Save and see what it looks like. Should be something like this:

Notice that we cannot see our text from the 2nd and third rows - remember that the text was black and now we made the background black - so the text is there but you can't see it.

So let's make some changes to the data elements:

If you closely at the code below you can see that
- in row 2 I have changed the color of the background and the text - I have also put the text inside of a paragraph tag - this makes the spacing in the table look better
- in row 3 I have changed the color the background and text, added a paragraph tag, and added some padding and a dashed border at the bottom, note that the border actually has 3 parts: size, style and color - the addition of the padding means the text is not right up along side the edge of the table which also looks neater and easier to read

Some notes:

Property Description
padding A shorthand property for setting all the padding properties in one declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element

The border-style property specifies what kind of border to display.

The following values are allowed:

  • dotted - Defines a dotted border
  • dashed - Defines a dashed border
  • solid - Defines a solid border
  • double - Defines a double border
  • groove - Defines a 3D grooved border. The effect depends on the border-color value
  • ridge - Defines a 3D ridged border. The effect depends on the border-color value
  • inset - Defines a 3D inset border. The effect depends on the border-color value
  • outset - Defines a 3D outset border. The effect depends on the border-color value
  • none - Defines no border
  • hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Here is another example of using the code to create 3D effects:

This is the code I used to create it:

Assignment for HTML Lesson 10

  1. Create the first table that demonstrates the practice three rows from the lesson above:
    table = 800 px wide with a border
    row 1 = logo (that was given in the beginning of the lesson)
    row 2 = color background with text up against the edge
    row 3 = different background color with padding included

  2. Create a second table that includes:
    table = set a width that works with your image, a border and color change
    row 1 = a logo of your own creation
    row 2, 3 & 4 = demonstrate your mastery of the different types of styles possible to use
    (the best way to learn is to try out a variety of coding combinations)

  3. Remember to include a link back to your index page

  4. Update your index page, upload all needed files to X10