Section 35. Add a Table

35. Add a Table


6 About Proper HTML Coding

7 Set Up a Web Page's Basic HTML Structure


2 Use HTML Tags

34 Create a Page

HTML pages were originally designed to work like a word processor: If you had a big chunk of text, it would flow down the page as if you had typed it on a typewriter. That would have been okay if computer screens were tall and narrow, but they aren't. So web design evolved and now tables are used to make the page work more like a newspaper. Tables were intended originally to display tabular information such as a spreadsheet, but web designers quickly learned to use tables to hold pictures and words so that they could display content in a better way for viewers to read.

Launch the Table Maker

Click on the Launch Table Maker button.

The Yahoo! GeoCities HTML Table Maker dialog box helps you create code for tables and then enables you to preview the table. When you're done, it enables you to copy the HTML for the table into your page in the HTML Editor .

35. Add a Table

2 .
Design Your Table

You are going to use this table to display photos and captions. To demonstrate abilities , I will place photos in a column on the left, and captions will be on the right with a space between the columns . Of course, you can arrange them in any way you like.

In the Table Align section, I will set the alignment to Left. This will ensure that my text and pictures are all on the left side of their table cells . You should try options to get an arrangement you like.

Last, I will set the table to have two rows and three columns. I will set the border to 0 and leave the Cellpadding and Cellspacing at the defaults. Experiment with your own content. There are many options you can use with your content.

Tables are measured in either percentage of the browser window or pixels. Tables measured in percentages are not always the best choice because the table will resize as the window is resized. If you want your table to always be the same size , try setting the width to 700 pixels. In this case, set the table width to 100%. This means that the table is going to take up 100% of the available browser window.

The BGcolor is the background color of the table. If you leave this box blank, the table will simply sit on your page and not look any different than the existing background. If you set a background color , the table is going to stand out from the background. In this case, I have deleted the value from the BGcolor text area.

Copy the HTML for the Table

Click on the Show HTML button, copy the HTML by clicking on the Select HTML button, and then press Ctrl+C to copy the code. Close the window.

When you show the HTML, this writes the code needed for the table to be written to the window. To get it into your page, copy it from this window and then paste it into your page in the HTML Editor .

Paste the Code for Your Table

Place your cursor in the HTML Editor below the end of the <p> tag and paste the table.

Now that you have the table in the HTML Editor on the page, you can add content to the table.

Enter Your Photo Captions

Photo captions help explain your illustrations and why they are used. Readers like them, and in this task, we will create a few. I will designate where the captions go, but it is up to you to add the captions and experiment with the formatting.

Between the <td> tags where there is a 3, enter a photo caption for your first photo. Between the <td> tags where there is a 6, enter a photo caption for your second photo. HTML requires this information be placed in between certain tags. In this case, we are adding the information to the Table Data tags, or td for short.


Be sure to place the caption information between the tags or the information may not be seen, or worse , it can corrupt the formatting and displaying of the table overall!

This will add the photo captions in the right column. There are three <td> tags in a row and they will be the individual cells of the table row. The third cell is the rightmost cell of the first row. The sixth cell is the rightmost cell of the second row.

Add your Images to the Table and Save Your File

As I work on the tacothechook website, I've prepared a few graphics. In this task, I will add them to the HTML content I've prepared.

Between the <td> tags where there is a 1 , I type <img src="AnniTaco.jpg"> . Between the <td> tags where there is a 4 , I type <img src="taco1.jpg"> . (You need to use the names of two of your own files you uploaded in Chapter 3, "Planning Out Your Website.") Be sure to type your own filenames exactly as shown.


The <img> tag tells the browser to go get the picture that you listed in the src="" attribute. I am calling the pictures that I uploaded, but you will need to list the names of the files you uploaded in Chapter 3. For more information about uploading files , see 36 Preview and Use the Easy Upload .

Between the <td> tags where there is a 2 and a 5 , type %nbsp; and then click the Save button.


Non-breaking space (&nbsp;) A non-breaking space is a blank space in HTML that you want to have in some places. You might want to use them for dramatic effect. You might want to use them as part of your page formatting scheme. By default, HTML gets rid of more than one space in a row, so if you want to add more spaces, type in &nbsp; .

Sams Teach Yourself Creating Web Pages All in One
Sams Teach Yourself Creating Web Pages All in One
ISBN: 0672326906
EAN: 2147483647
Year: 2006
Pages: 276 © 2008-2017.
If you may any questions please contact us: