HTML Tables By Hand: HTML Part 2

More HTML Concepts: Tables

By Joey Delli Gatti

OK, so we made a simple page using basic HTML in the HTML By Hand lesson. The object of that lesson was to make some of the lingo, like ‘tag’, more familiar and to demonstrate how easy and fun and addicting that HTML can be.

To follow up on that subject, a few things need to be adressed: sizes and colors. First I’ll adresse sizes.

Sizes can be done in a few different ways, and various browsers react in different ways to each of the methods. The first way is to specify size or any measure as a number like 10, 250, or 800. The second way is to specify by percentages like 10%, 80% or 100%. The third way is to specify in pixels like 10px, 100px or 350px. To find out which things work with each type of sizing method, google “font size HTML” or “table width HTML” etc.

Colors are much more fun than dealing with sizes because you’re allowed to be more of an artist – blending multiple variations of red, green, and blue (in that order). HTML will let you specify any value, two digits long of different shades of each color. The number system for colors is as follows: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. 00 means that none of that particular color will be displayed, and ff means the ultimate brightness that your computer will allow of that color will be displayed. Think of it as counting up to 15 on both digits of the color number. Let’s mess just with red in a font tag.

<font color=”000000″>Color Test</font>

<font color=”220000″>Color Test</font>

<font color=”550000″>Color Test</font>

<font color=”880000″>Color Test</font>

<font color=”aa0000″>Color Test</font>

<font color=”ff0000″>Color Test</font>

Now with green only:

<font color=”002200″>Color Test</font>

<font color=”006600″>Color Test</font>

<font color=”008800″>Color Test</font>

<font color=”00aa00″>Color Test</font>

<font color=”00cc00″>Color Test</font>

<font color=”00ff00″>Color Test</font>

We’ll skip blue. Let’s go right to mixing colors:

<font color=”ff00ff”>Color Test</font>

<font color=”259900″>Color Test</font>

<font color=”0025ff”>Color Test</font>

<font color=”666666″>Color Test</font>

<font color=”501050″>Color Test</font>

<font color=”ffff00″>Color Test</font>

This color system works to specify color for any aspect of your html page. To find a color chart online, just do a google search for “HTML Colors”. Now on to the even more fun part of the art and design portion of HTML.

Tables

Tables really bring a page to life. They separate things into different sections of a box. Most Web pages are created using these “boxes” or <TABLES>. Here is an example of some of the uses for html <TABLES>:

Oh, isn’t this wonderful? We can put pictures in boxes.
and can color the background… or put graphics in the background
We can even put boxes in boxes row 1, box 2
row 2, box 1 row 2 box 2
or links

You can make tables with visible borders, background colors, and all kinds of things. A table starts with <table> and ends with </table>.

Just like you can join or resize cells in MS Excel, we can do the same thing in HTML. In <table>s, we first have <tr>, which stands for table row. Within every <tr>, we have <td> or table downs (aka table cells). We can also place <TABLES> inside of <TR>s of <TABLE>s as shown in the example above. While we won’t use a <TABLE> inside of a <TD> for our little tutorial, we will combine cells or <TD>s in a <TR>.

Let’s use the table to create an eBusiness card for display in an HTML document. Start with the basic <HTML> tags like this:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

Now, we’ll do a similar thing to create a raw table inside the <BODY></BODY> tags:

<TABLE>

<TR>

<TD>

</TD>

<TD>

</TD>

</TR>

<TR>

<TD>

</TD>

<TD>

</TD>

</TR>

<TR>

<TD>

</TD>

<TD>

</TD>

</TR>

</TABLE>

This is where indenting tags becomes really handy. It help us to see what we’re doing easier. We now have a <TABLE> with three <TR>s each containing two <TD>s. Now, we’ll start to fill in some of the information that we want displayed. Feel free to alter your business card however you want if you’re a fast learner.

<TABLE>

<TR>

<TD><img src=”http://webpub.byu.net/dellijo/images/home/portrait.jpg” valign=”middle” halign=”center”>

</TD>

<TD><p>Joseph Delli Gatti</p>

</TD>

</TR>

 

<TR>

<!–This is how you combine cells. You just say colspan=(and the number of cells to combine). Don’t forget to erase the extra TD tags now. To combine two rows, just do rowspan=”2″>

<TD colspan=”2″><p>Wedding Videograph, Blogging, and ditch diggin'</p>

</TD>

</TR>

<TR>

<TD width=”50%”><p><a href=”mailto:joey@mimweddings.com”>joey@mimweddings.com</a></p>

</TD>

<TD><p>(801)373-0987</p>

</TD>

</TR>

</TABLE>

My result looks like this, which is OK before we add all the visual details (border is visible to help you see where the cells are although I didn’t specify it in my code above):

 

 

Joseph Delli Gatti
Wedding Videograph, Blogging, and ditch diggin’
joey@mimweddings.com (801)373-0987

Now to make adjustments and integrate visual attributes.

First, I want to pad my content by five or 10 pixels from the edges of the lines. This will give me some padding from the edges so that things aren’t crammed right up against the border of my table.

Then, I want to shrink my photo down using a height=”” attribute so that it fits more proportionately on the card.

Then, I want to enlarge my name with a <font size=”+1″> tag, bold my name with a <b> tag and move my name to the top of the cell by using a valign=”top” attribute in the <p> tag.

Then, I want to make my next <TR> taller by using a height=”200″ attribute. This will leave me with more white space and will provide more focus on my slogan. I also want to enlarge my slogan, and italicize it with an <i> tag so that it stands out a bit more.

I want the information on the bottom to be larger, bolded, and for the phone number to be right aligned using a align=”right” attribute. I want the bottom info to be at opposite ends of the card.

Yes, this is all possible. Here it goes. Apply this step (line by line) to your card as well.

<TABLE width=”500px” height=300px” cellpadding=”10px” tableborder=”1″ bgcolor=”dddddd”>

<TR>

<TD width=”80px”><img src=”http://webpub.byu.net/dellijo/images/home/portrait.jpg” valign=”middle” halign=”center” height=”100px”>

</TD>

<TD valign=”top”><p align=”right”><font size=”+1″><b>Joseph Delli Gatti</b></font></p>

</TD>

</TR>

<TR>

<TD colspan=”2″><p align=”center”><b><i>Wedding Videograph, Blogging, and ditch diggin'</i></b></p>

</TD>

</TR>

<TR>

<TD width=”250px”><p align=”left”><b><a href=”mailto:joey@mimweddings.com”>joey@mimweddings.com</a></b></p>

</TD>

<TD><p align=”right”><b>(801)373-0987</b></p>

</TD>

</TR>

</TABLE>

Here is what it looks like now:

Joseph Delli Gatti

Wedding Videography, Blogging, and ditch diggin’

joey@mimweddings.com

(801)373-0987

So, hopefully you can refer to the above attributes and tags to help your own tables. Some browsers will treat your code in slightly different ways. It’s a good idea to double check things by opening them in FireFox, Safari, and Internet Explorer. Make adjustments as needed, and always google for answers.

To design a Web page, sometimes it’s a good idea to start off with a vision of what you want it to look like – draw it on paper first. Then, take another piece of paper and outline all the cells and the cell attributes. Then, take a third sheet of paper, outline the cells and write out the proper format for the image tags, links, and the formatting for fonts and paragraphs.

Below is a rough example of this concept in action, but it should give you an idea of how to transfer your visual dreams magically to HTML formatting:

Hint: if you can’t get the content to fit how you want them in a particular set of cells, you can combine cells, and then create another <TABLE> within the newly combined <TD colspan=”number of cells to combine”>. Don’t forget to erase the other <TD>s making the one larger cell that takes up the space of the others. Otherwise, you’ll end up with extra cells hanging off the end.

Also, when you have a <TABLE> with only one <TR>, it is easier to adjust the width=”” attribute in each <TD> of that single <TR> to distribute the cells in the row how you want them to appear.

Good luck and feel free to ask questions in the comments section. To see an early example of a page that I made by hand using tables, click here. In your Web browser, go through the menu items in the top bar and select the one that says, “View Source”.  You’ll be able to view the raw HTML for the page.

Don’t worry if your first few pages aren’t as complex as my early pages. I put a loooonngggg time into some of them (especially trying to get them to look the same for each browser).