Inserting a Table

This tutorial illustrates inserting a table in Dreamweaver CS5.

Now let's see how to insert a table.

First of all, check that we're in Standard Mode using the Table Mode fly-out on the View menu.

Now select Table from the Insert menu.

Now we see the Table dialog.

There are several choices to make, and we'll go through them is sequence. Note that most of them can be changed later, so don't worry too much if you make a mistake here.

The number of rows and columns is a straightforward choice, and if you're not certain a "best guess" will certainly do for now.

Table width can be expressed in pixels or as a percentage of the screen width.

This choice needs to be made carefully. Specifying width in pixels means that you know exactly how much width you have, but if you are going to accommodate visitors with browsers with resolution set as low as 800x600 or even 640x480 the width in pixels cannot be greater than that. This means that for visitors with higher resolution settings the table might look like a thin strip on the screen. On the other hand, if you set the width as a percentage of screen width, the actual width will vary depending on each visitor's screen settings, which makes it more difficult to judge how the table will look.

Here I've chosen a width of 600 pixels.

Border thickness is set to suit your specific requirements for this table. Here I've set it at 5 pixels.

Cell padding specifies the space in pixels between the content of the cell and the cell boundary, whilst cell spacing specified how much space in pixels there is between adjacent cells. I've set both at 2 pixels.

I've specified that the table has a header at the top.

If a caption is specified it is displayed outside the table.

The Summary is only used by screen readers for accessibility purposes.

Here is the completed dialog.

Press OK and the table is inserted.

Note that the width of the table is shown in the document window, and that the Properties Panel contains information about the table.

More Dreamweaver Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Inserting a Table in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!