Tables are useful if you want to show relationships between different types of data. They allow you to group related data in rows and link them to other data in different columns. While they are often not needed on many sites, there are certain situations where you may want to present your data in tabular form. This tutorial shows you how you can create and customize the appearance of your tables using Dreamweaver.
This tutorial assumes that you already have a website and know how to use Dreamweaver. If this is not true, you should read the following two tutorials first.
How to Start / Create Your Own Website: The Beginner's A-Z Guide: this is a guide that takes you through the various steps needed to make your own website from scratch. There's more to making a site than designing its appearance.
Dreamweaver Tutorial: this tutorial takes you through the actual design steps using the Dreamweaver web editor software.
This tutorial focuses on creating tables for the purpose of displaying data. It does not deal with the creation of a multiple-column page layout using tables. Since Dreamweaver is a modern web editor that handles Cascading Style Sheets, or CSS, you do not need to resort to using tables for such purposes. See my Dreamweaver tutorial if you need help on creating multi-column websites.
Start up Dreamweaver and open the page where you want the table.
Move your text cursor to the location on the page where you wish to insert the table. One way to do this is to simply click the spot where you want the table to appear. This will cause your text cursor to move to that place.
Click the "Insert" menu and then the "Table" item on the menu that appears. In the interest of brevity, I shall refer to such a sequence of clicking menu items as "Insert | Table".
A dialog box entitled "Table" will pop up. Enter the number of (horizontal) rows and (vertical) columns you want the table to have in the spaces for "Rows" and "Columns" respectively.
"Table width" refers to how broad you want the table to appear. This width can be specified in percentage of the enclosing column of your multi-column site or in pixels. For example, if you want the table to span the entire width, type 100 into the box for "Table width", click the down arrow of the adjacent drop down box and select "Percent". It's also possible to create an auto-resizing table by deleting the number in your table width box. Your table will then be resized by the web browser and Dreamweaver according to how much content it has.
Tables can be borderless or have borders. Borders are just the lines that demarcate the boundaries of each table cell. In general, for data tables, most people want borders since they make the table easier to read. The thickness of the borders are specified in the "Border thickness" box. It defaults to 1 pixel. It's up to you whether to change it or leave it at the default. If you do not want a border, enter "0" (zero, without the quotation marks) into the box.
Cell padding is the amount of space you want between each cell's content and its border. Cell spacing is the amount of space you want between adjacent cells. You can leave it blank or set it to any value you wish. If you're not sure what number is appropriate, you can always enter some random value (like "2") to start with and adjust it later. I'll mention how you can change the settings you make here below, without having to recreate everything. Note that "0" (zero) is a valid value for these fields as well.
The "Header" section allows you to indicate that leftmost column or topmost row of your table is going to contain a description for that column or row. The content of the column or row that you designate as a "header" will be displayed in a bold font and centred. The default is to create a table with no headers, that is, all rows and columns look the same, and nothing is internally marked in the HTML code as being a title for that row or column.
In the "Summary" box, enter a brief description of what your table contains. For example, if the table contains the examination scores for each student in your class, you may want to put "student examination results" in the summary box. This box is optional, and its contents will not be displayed. It is primarily intended to improve the accessibility of your table and may be used by specialized software like screen readers.
When you're done, click the "OK" button. The table should appear on your web page. Note that when the table is first created, Dreamweaver selects the entire table although it may not be immediately obvious that it has done so. Therefore do not type anything yet or you'll accidentally replace the whole table with what you type. Instead, click a cell in the table before starting on your content.
If you are dissatisfied with the table you created above for some reason, you do not have to delete everything and start over.
To add new rows or columns to your existing table, click "Insert | Table Objects". A menu will appear allowing you to insert a new row above or below your current cell (where your text cursor is currently shown) as well as a new column to its left or right. If your cursor is not within any cell in the table, first click somewhere within one of the cells before using this menu.
If you have set or not set a particular cell as a header, and now have a change of heart, click the cell that you want to change. Look at the bottom of your Dreamweaver window to locate the Properties pane. Somewhere in that pane, you should be able to see the word "Header" with a checkbox beside it. If you had previously designated the cell as a header and now changed your mind, uncheck that box. If you have previously not made that cell a header and now want it to be one, check it.
Look at your table. There should be a fine green line above the table with the width of the table displayed in the centre. Click that line. This should select the entire table.
(If you don't see any green line, it means that your text cursor is not in the table itself. Click anywhere in the table and the green line will appear. Don't worry about that green line: it's just a visual cue used by Dreamweaver to allow you to select the entire table easily. It is not actually displayed in a real browser.)
The Properties pane at the bottom of your Dreamweaver window should now show the table width in the box beside the "W" character. Change it to the new value. You can also switch between specifying the width in pixels and percentage by clicking the down arrow in the adjacent drop down box.
To change the cell padding and spacing of the table, click the green line above your table to select the entire table. The Properties pane at the bottom of the Dreamweaver window should now display the "Cellpad" and "CellSpace" fields, allowing you to set or change them.
In the same way, you can change the background or border colours of your table. Click the green line above your table to select the entire table. In the Properties pane at the bottom of the Dreamweaver window, you should now be able to see the fields "Bg color" (that is, background colour), "Brdr color" (for "border colour") and "Bg Image" (for "background image"). Clicking the box beside any of the colour fields will cause a colour picker to appear, allowing you to choose a colour.
If you're setting a background image, you should first copy the background image into a folder or subfolder of your website directory. By "website directory", I mean the directory that appears in the rightmost column (the "Files" pane) of your Dreamweaver window. Either copy the image into that folder itself, or a subfolder within it. This will allow Dreamweaver to manage that file with its site manager and upload it automatically when you publish your web page. Once you've done this, return to the Properties pane for the table and click the folder icon on the "Bg image" line and select the image file accordingly.
If you wish to change the background colour of an entire row or column, for example to make your table zebra-striped or have alternate shades of colour (for easier reading), drag your mouse across that row or column. That should select that particular row or column. Then change the background colour for that row through the Properties pane at the bottom of the Dreamweaver window. Specifically, click the box beside the word "Bg" (for "background") to display the colour selector.
Congratulations. You now know how to create and customise a table in Dreamweaver, as well as how to change its settings after you have created it.
Copyright © 2008-2017 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Create and Customize a Table with Dreamweaver
