Intermediate Seminar #1: Tables and Dreamweaver

C

Information Technology Services Division

A

Agenda • Introduction • What is a Table, and Why Do I Care? • Some Background • Tables in Dreamweaver • Tables inside Tables • Tables as Outlines • Dynamic Formatting • Tables, Tables Everywhere • Past, Present and Future • Questions • Getting Help • Review • Evaluation Please complete your course evaluation form. We value your comments. ITS Help Desk Room 70, Arts 966-4817 [email protected]

Agenda • The instructor will review the agenda for this course. If you have any questions or problems during the course, please feel free to ask the instructor for help. Introduction • The instructor will introduce himself or herself. • The instructor will discuss other courses offered by the Information Technology Services Division and where you can find more information. • The instructor will discuss the handouts for this course. • It is assumed that you are familiar with the Dreamweaver environment. • You will not require access to a mainframe computer for this course. All of the documents created during this seminar are available at the following URL: www.usask.ca/its/courses/dreamweaver/tables/index.html What is a table, and why do I care? • HTML, the background code used by web browsers to piece together your webpages, is used to describe how text and other objects should be formatted on a computer screen. • The HTML code at a basic level in web design, and used by Dreamweaver when developing pages as we did in the introductory Dreamweaver course offered by ITS, doesn’t often allow you to place objects exactly where you want them on the screen – especially when your design is not satisfied by simply left aligned (), centre aligned (), or right aligned () options. • To organize text and other objects on the page with more control, an intermediate option is the use of tables. • A table allows a web designer to arrange data (text, graphics, and all other objects) into columns and rows of cells. • I’m sure that immediately Excel or another

Dreamweaver Intermediate Seminar #1: Tables

Notes: Table are not just web spreadsheets

•

•

Table basics

spreadsheet application come to mind. But tables are much more than a way of setting up a spreadsheet on your webpage – much more! Tables will allow you to do many exciting stylistic layout formatting on your web pages, make your web pages more dynamic, organize information in more logical ways, represent tabular data (like data from a spreadsheet or database) and even – in some cases – speed up graphic download times. “But how?” you ask. Read on.

Some Background on Tables • As mentioned earlier, tables are made up of a few basic elements: columns, rows and cells. We’ll overview these first, then get into some specifics on each. • Take a look below at an example of a table.

•

Not particularly exciting, is it. Well, let’s look a little deeper into it.



Column A

Column B

Column C

Row 1

Cell A1

Cell B1

Cell C1

Row 2

Cell A2

Cell B2

Cell C2

Row 3

Cell A3

Cell B3

Cell C3



• •

The example above describes a very simple table. The columns and rows are set up just as they are in a spreadsheet, and the cells are where they intersect. In the HTML for a table, if you’re interested, three tags are used: o o o

•

blah blah blah blah blah blah blah blah blah are defined as “table data” (hence )

Cells and, for the purposes of explanation here the row with the Page 2 of 12

Dreamweaver Intermediate Seminar #1: Tables

• Adding tables

the purposes of explanation here, the row with the largest number of s is how many columns will be displayed. All tables start out this way – in grid / matrix format. From here you have some options and it is in the options that make tables work wonders.

Tables in Dreamweaver • To add a table to Dreamweaver you may use the Insert Table button on the Object Palette. • Clicking on this button displays the Insert Table dialogue box. From here you can adjust some of the options for your table.

• Width of a table

•

Table borders

•

Cell padding

•

Cell spacing

• •

First off, you sent the maximum number of rows and columns you would like within the table. The width of the table will be either relative to the size of the browser’s window (in percent) or fixed at a specific point size (in pixels). If you use the percent option, you probably don’t want to use a size larger than 100%, otherwise visitors to your site will have to scroll from side to side – something no one enjoys. The border size is measured in pixels and is the thickness of the border around each cell and the entire table. If you leave it at zero, no border will appear. You will find this option very useful the more you use tables to format the layout of your page. Cell padding is spacing within cells (from their border to their content) in pixels. Cell spacing is spacing between cells (from the edge of one cell to the next) in pixels. Let’s start by creating a table with 4 rows, 4 columns, a width of 60%, a border of 5 pixels, and cell spacing and cell padding of 3 pixels each. Your table will look something like this:

Page 3 of 12

Dreamweaver Intermediate Seminar #1: Tables

(Web example 1)

•

Selecting single or multiple cells

• •

Notice that the table has selection indicators around it, and that the Property Inspector Palette has changed allowing you to manipulate the properties we just set for the table. You can select individual cells as well as the entire table. Clicking inside a cell and dragging will select multiple cells. Multiple cells selected can be merged into a single cell – a cell that spans multiple rows, columns or both. o Below you will see a table with cells spanning multiple rows and columns. Try to recreate this by selecting the cells and hitting the Merge Cell button on the Property Inspector Palette.

(Web example 2)

Page 4 of 12

Dreamweaver Intermediate Seminar #1: Tables

Merged cells

• • •

•

Table columns and rows are not necessarily static

Adjusting the height and width

•

The table above still has four rows and four columns. In merging cells, you are limited to rectangular shaped cell merges. Dreamweaver will not allow you to select irregular shapes and merge them into a single cell. You can now think of each cell as a mini-window of sorts. You have the ability to work within that cell the same way you would within the body of your page. You can enter text, graphics, or any other object you want. You can format all of these in the same way you do within the body of your webpage. For example, text and other objects can be aligned right, left and centered horizontally. You also have some more powerful formatting options, to be discussed later. Be careful however, because table columns and rows don’t always remain static. If you add more text to a cell the row size, column size or both may increase. o By default Dreamweaver displays rows and columns equally sized within the table, but this can very quickly change as objects are added to the cells. o To keep columns from expanding, you can set their width relative to the size of the table (using a percentage unit) or to a fixed size (using a pixel unit). o You can adjust the width and height of a cell by editing the H or W fields on the Property Inspector.

(Web example 3)

Page 5 of 12

Dreamweaver Intermediate Seminar #1: Tables

Tables Inside of Tables • From the title of this section you have probably already guessed what we will be talking about, and that the inclusion of tables inside of other tables is very possible. • Remember that earlier we talked about how a cell can contain any object that can exist within the body of your page – this also goes for other tables. o Try to recreate the table showing below: (Web example 4)

• •

Use table for …

colour

layout

You can centre the tables you add to cell, the same way you would centre text. But why would you ever want to add a table inside of another table? There are many reasons you may want to do so to display tabular data – in the next section, though, we will discuss some of the layout reasons why you may want to.

Tables as Outlines and Layout Tools • Because tables can contain as few as one column and one row (ergo: one cell), they can be used in the layout of your pages to highlight or separate out text or other items from the main content of your page. • The colour of tables can be adjusted, if you like. By default, a table is the same colour as the background you have selected for your page. You can, however, adjust the background colour of a row, column or even an individual cell. • But tables have other uses, as well. Remember that a table can have a border of zero, this means that the cells in the table can be used to place text or other objects in specific places on your page. Take a look at the example below:

Page 6 of 12

Dreamweaver Intermediate Seminar #1: Tables

(Web example 5)

•

•

•

• •

Above, I started with a table containing two columns and three rows. For both the top and second row I merged the two cells into one. In this way I was able to separate the “UNN” from the “University News Network” lines of text, made most noticeable by changing the background colour of the second row. This gives my page a distinctive title, then a subtitle. In the bottom row, I left the two columns in place. I did however make the left cell span only 25% of the table size, and gave it the same background colour as the row above. This encompassed the main text on my page and told the visitor that these are the bounds of the document. I also included a navigation scheme along this side of the page. You may also notice that the cell borders were set to 0 (zero). This allows me to “hide” the table so that it is not obviously apparent how I formatted the layout of the page. One other adjustment I made is with regard to the vertical alignment for each of the cells. If you recall, earlier I mentioned how tables allow you some more powerful alignment options than are presented within the body of your document. This power comes in the form of vertical and horizontal

Page 7 of 12

Dreamweaver Intermediate Seminar #1: Tables

•

Default alignments

•

•

•

•

Outlining blocks of text

•

•

alignment. On the property inspector, you will see two drop-down fields marked Horz and Vert. Below, you can see that they have been set to “Default”:

The default horizontal alignment is left; the vertical alignment is middle. Horizontal alignment options are as you would expect: left, centre and right. Vertical options include: top, middle and bottom. If you allow the vertical alignment to remain middle, as another cell in the same row increases in size, cells with less content will automatically shift their position to the centre of the row. Watch this, as it may not be the effect you’re looking for. In the UNN document above, I set the vertical alignment of the bottom left cell to top. This keeps it fixed at the top of that row, no matter how much text I placed in the cell next to it. If we recall that tables may be placed within cells of other tables, then we can accomplish other layout options beyond that shown above in the UNN document. Below you will see an example of a long article. The article has been set up within tables, and uses tables inside of tables to construct an interesting layout format. It appears that instead of using background colour to separate text, I have used an outline feature. The fact is, no outline feature exists within tables. Rather, what I have done is simple built a table with of one cell, a black background colour and set the cell padding to a value of 3 pixels. I then placed another table inside of this black one, again with only one cell but this time I made sure that the width of the table was set to 100%. I also changed the background colour to be the same as my whole document’s background colour – white. The table inside of this (the third table so far) can now have as many cells as necessary and the text inside has been surrounded by a black 3-pixel line.

Page 8 of 12

Dreamweaver Intermediate Seminar #1: Tables

(Web example 6)

•

Flexible layout

You will also notice a small bit of text within the article that has been given a similar outline.

Dynamic Formatting • The option of vertically aligning the objects within a table will allow the content of your pages to move dynamically within the window of the browser used by visitors to your site. • The three examples below shows a graphic perfectly centred, both horizontally and vertically, on a webpage. Stretching the window size will show how this document dynamically adjusts to any sized browser window, and the overall layout style is retained.

Page 9 of 12

Dreamweaver Intermediate Seminar #1: Tables

• Centre vertically and horizontally •

Cut large graphics into slices

To achieve this effect, you must place the graphic inside of a single celled table. The table must have a width of 100% and a height of about 100% (but no more than 100%). I suggest you use a height of 90% as this will ensure that your image is slightly higher than exactly centred, and just looks better. Next, centre the graphic within the cell both horizontally and vertically.

Tables, Tables Everywhere • We will reexamine the example I used above and see how the graphic I used is, itself, also holds a table. • When I designed the logo for the Guns and Butter factory, I added two areas to the graphic that I want to use as links. I placed them on either side, at the base of the image. • If you recall from the Introduction to Web Design Using Dreamweaver course, one of the special types of links that you may use are “attached” to graphics. Now, in that class we learned how to take a single graphic and add a link. This special link limits you to only one link per graphic. But if you slice your graphic into pieces and reassemble it inside of a table (without borders, cell padding or cell spacing), individual slices can be links unto themselves. • In the Guns and Butter logo example, I sliced the image you see into six slices: three across and two down. The bottom left corner slice is a link to my guns.html page; the bottom right slice to my butter.html page.

Page 10 of 12

Dreamweaver Intermediate Seminar #1: Tables

(Web example 7)

More than one link on a big image May speed up download time!

•

•

•

This is a very simple way of attaching different links to what appears to be a single graphic. There are other, more complicated ways of doing this as well. For example, one way is to create an Image Map. Slicing large graphics into smaller ones may save download time on some servers, too. Computers are able to perform multiple tasks at the same time, and this divides a large task into several smaller ones. Now that you know that images may be cut into different slices and then assembled within tables, you will soon be seeing tables in the layout of not only websites, but newspapers, magazines, advertisements, books or any other printed material. But are tables a thing of the past, present or future on the web?

Past, Present and Future • Tables were certainly an early addition to the HTML standards, but it took some years for the major web Page 11 of 12

Dreamweaver Intermediate Seminar #1: Tables

lynx has difficulty with tables

•

•

XHTML, XML, XSL and CSS

•

•

standards, but it took some years for the major web browsers to learn to deal with them properly. Some argue that they haven’t even done it yet. Browsers on a mainframe computer, like lynx in Unix, still don’t handle tables very well. You have to be really careful about this because there may be some accessibility issues involved – especially since web readers (for the blind) read webpages similar to the way lynx displays them. Tables are certainly a very current way of presenting data and objects via a web browser, but the future of HTML will see major improvements in layout design on the web. XHTML, XML, XSL, and CSS (or Cascading Style Sheets) are international web design standards that will make the use of tables for layout a thing of the past. When they take over the limelight from HTML is really to be determined by when web browsers are developed to support them. If you are a web designer at the U of S, I strongly suggest you look into XHTML, XML, and CSS. If you already know HTML, the transition to XHTML will be very painless, and from there XML is not difficult to understand. CSS is simply a way of attaching formatting and layout design to data in XHTML, and XSL is how it is done to XML.

Practice Session and Questions Getting Help • Information about the internet services available to the university community is available from the ITS Help Desk. Phone 966-4817, email [email protected] or drop in to Room 70 Arts. Review Evaluation • Please complete the evaluation form provided by the instructor. • We value your comments.

ITSERTSTR 20011219

Page 12 of 12