•   Tables - What are they?

Tables are a lot like divs - they can be used to hold things. You can apply styles to them or use them as containers.

  •   But nobody likes them anymore. Why?

One reason they are unwelcome now is because there are so many ways to get on the internet: iPhones, mini-laptops, even television - Tables don't flex well to these new formats. 

And who knows what weird internet gadgets are coming. 

Divs take less code, are therefore "lighter" and load quicker.

There's nothing wrong with tables, as such. It's good to know how to use them and they are easier in many ways.

Just don't depend on them … .


Summary:

Tables in Dreamweaver

    ●   Use tables to line up images and data side by side, like a Gallery page.


Learn About:

Using tables to build web pages are frowned upon. :( But tables can be useful under certain circumstances.

  •   This tutorial is part of the Art Genre Project.

Other People's Work:

Here are examples of work inspired by this tutorial.

Renaissance Art

renaissance images "What I like about this artwork is that it's really creative. When I saw saw this art I was like the colors is too dark and too many red colors added in there. But when I went through all his artwork it looks like he put all his effort in there to show that a picture or a drawing of his is really mean something. Like the drawing down there, I really like it because it is really emotional. It has my sense of humor or it is what that attracted me because of the way he draws the girl and the guy with her tears falling. It means something is really inside her that she always wanted to tell him.

 

Mona Lisa

ren 2 My site can be for people who love art and it can be for people who do not know that much about art. It will inform them about impressionism and two of the most known impressionist painters, Vincent Van Gogh and Claude Monet. More than anything this website is here for people to enjoy these beautiful works of art. I really want people to get a sense of what impressionism is all about.

Click to view Example #1 | Example #2 | Example #3

   
   
   



Step #1: Open your Gallery Page in Dreamweaver ~

Do you have a Gallery page or a page where you need to list information? Open that page in Dreamweaver …

… and click inside the content area of the page you want your tables in.


Step #2: Insert a Table ~

Go to: Insert > Table and set the width to 80 or 90 percent, 3 rows and 2 columns (for now) …

tables

… also set your border thickness (for now, all of these settings can be easily changed later … )

table border thickness

… . lastly, set cell padding and spacing, which are the distances between the cells …

cell padding

… again, you don't have to get married to any of these settings right now, they can be easily changed later …


Step #3: Select the table ~

Highlight the top two rows of your table ...

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

… and then go to: Modify > Table > Merge Cells … or in the Properties menu, click the Merge button.

merge

Type something in the merged cells you can use as a header for the table …

resume


Step #4: Adjusting Cells ~

You can also adjust the column widths.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #5: Borders, Colors & Other Adjustments ~

Select the table by clicking on the top button …

select table

… and in the Properties menu (Window > Properties or hit the keyboard shortcut: Cmd(⌘)+F3, remove borders - or add them.

border width

… also while you're there, select Align - Center

align center


Step #6: Add your Content ~

Find some images your artist created and open them in Photoshop, and then go to: Image > Image Size and set the resolution to 72.

resolution

Remember - 72 is the highest resolution a computer screen can show.


Step #7: Image Size ~

Lower the width on the images to approximately 300 pixels.

width

If necessary, Crop the images to get them to fit.

crop

You may have to crop your images to save the only best parts …


Step #8: Save for Web ~

Lastly, go to: File > Save for Web and save your images as .jpg

jpg

Lower the quality until the size is below 100 kilobytes, on average..


Backgrounds for websites should be as small as possible. They must be downloaded every time your viewers open your pages so it's important to keep it as small as possible so they load quickly.


Save the images in the ROOT FOLDER OF THIS PROJECT!


Step #9: Insert the Image into the Table~

… and go to: Insert > Image … and locate the image you saved in your root folder.

Then type a short description of the image …

alt tag


Step #10: Type some Text ~

Finally, type your descriptions of the images, your thoughts about them, and any other content you need in the cells next to your images.

Table layout example


Last Step: Save and Upload your Work ~

If you have a web server, save your pages, upload them and attach the link to your site …

upload-site-dw.png

If you DON'T have a web server, you will need to attach the .zip file with the completed work …

zip file


Other Resources: http://www.youtube.com/watch?v=803Pyf_EAI4 and http://www.html.am/html-codes/tables/table-border.cfm