Macromedia Dreamweaver Tutorials

Creating a basic table in Dreamweaver 8

Tables were invented to hold data in tabular form, but it was soon realized by designers that this new incarnation could be used to transform the layout out of HTML pages and make it easier to include images, text and other elements in their web sites, it should be noted that tables are not strictly the correct way to display text , images and other elements on a web page, whilst it does work and it works well, it does not conform to the latest standards, for what it’s worth I think that any web designer should have a good basic understanding of tables, but once the basics have been mastered should then look towards CSS for creating layouts. In this Dreamweaver tutorial we are going to look at the absolute basics of tables.

How to insert a table in Dreamweaver
To insert a table into your web page you can either go Insert > Table from the main Dreamweaver menu , or from the Insert panel ( if this is not showing press Ctrl+F2 ) under the Common tab, select the little table icon ( image 01 )

image 01
you can also use the shortcut Ctrl+Alt+t, but which ever option you choose you will end up with a input box like this.
:
image 2

Adding rows and columns
The first fields are asking how many rows and columns we would like to insert, a rough guess is all that is needed since you can add or delete rows and columns later if needed.

Pixel or percentage
The next field is the table width, we enter a value and then have the option to decide if that value is a fixed pixel size, or if we require the size of the table to be relative to the overall size of the page, in other words, a table set to 50% on a web page of 750 pixels would render at 375 pixels, but for the time being we are going to stick to the simple fixed pixel width and enter a value of 350 pixels.

Web designers particularly novices web designers are often confused when using tables to layout web sites, should they use fixed or relative, well it's a personal thing, there is no right or wrong way.

The next field “ Border thickness” places a border not only around the outside of the table but also around all the cells with in the table, I shall place a value of 1px in the field to demonstrate this.

Cell Padding and Spacing
There is often a little confusion of with these, Cell padding creates space inside the cell, while Cell Padding is applied between the cells them self. See screen shots ( image 7 and 8 ) below for a qucik explanation.

Image 7

Image 8

The Header options
This allows you to select which cells you want to display as bold and centered which in table terms is a Header, by default it is set to none, it can be changed later from the properties inspector. The image ( 09 ) below highlights this since it as the top row set as an header.

image 08

Image 09, showing the differance between an header and a plain field.

A basic table is created
With all these settings in place we have created a basic table.

Dreamweaver offers many more features for the control of tables and with the basics now covered we shall move forward to take a look at these.
Part two of this Dreamweaver tutorial >>