Unit 7. Setting up Tables (I)

Unit 7. Setting up Tables (I)

In this unit we're going to see how to work with tables. We'll learn how to insert tables, combine cells, insert rows or columns, and how to change the border size.

Introduction

All objects are aligned on the left side of the web site by default. But thanks to the tables it's possible to distribute the text in columns, place the images next to a text block, and many more things we could not do without the tables. At the moment most web sites are based in tables, and this is because they are very useful to improve the design options. Tables are composed of a set of cells and are distributed in rows and columns. Below we have an example of a table:

Insert a table

To insert a table go to the Insert menu, and then select the Table option.

In the new window you will need to set the number of Rows and Columns, and the width of the table. The Width can be defined in Pixels or as a Percent. The difference between these is that the width in Pixels is always the same, independent of the size of the browser window in which you are viewing the page, whilst the width in Percent shows the percentage of the browser window that will be occuped by the table and there fore it wil be adjusted relative to the size of the browser window. This allows users with a large screen to take advantage of the width of it. Border thickness indicates the border thickness of the table in pixels. It is assigned a one (1) by default. Cell Padding indicates the space between the cells content and the their borders. Cell Spacing indicates the space between the table's cells. A heading for the table can also be established, and it is recommendable to use headings in the case of users that use screen readers. Screen readers read headings and help the users to follow the table information. If you want to include a title, set it in the Caption option - the title will show up outside the table. In align caption we indicate where we want to align the title in respect to the table. In Summary: we indicate a description for the table which screen readers will read, remember that this text will not be visible in the user's browser.

Cell Padding

Cells are the squares that compose a table and are the intersection of the rows and the columns.

		Text and image			COLUMN
		Text inside a cell
		CELL
ROW

To insert any element into a cell such as text or images, you just have to place the cursor in there. 

Unit 7. Setting up Tables (II)

Selecting the elements in a table.

There are many ways to select a table. One of these is through the Modify menu, by placing the pointer in the table, or by unfolding the contextual menu of the table by right-clicking on it. In both cases you will see the Table option, through which you can select the Select table option. It's also possible to select a table by clicking on the border that sorrounds it, or clicking on the <table> label that is on the status bar of the document's window.

When you select a table or when you place the pointer over any part of it, Dreamweaver shows its width and the one of each column in a green zone. Along the widths are the pull-down panels (heading of the table menu and heading of the column menu). Those menus allow us to quickly access specified commands related to the table. If you have the cursor in the table and you don't see this green zone you can activate its view by selecting the Tables' width option from Table menu, or by unfolding the menu bars: View menu, Visual helps, or Tables' width. You can deactivate the view by performing this same action. If you cannot see the table or column width, then the table or the column doesn't have an specific width. If you see numbers, the first number corresponds to an specified width in the properties of the table or column, and the second number is the visual width that is in the design view, for example, in the previous table the third column has 139 (142) in its cells properties. So we have 139 pixels of width, but if it contains an image that needs more space, the column will size 142 pixels (visual width of the column as it is shown on the screen) When having these differences we can select the Make All Widths Consistent option from the drop-down menu of the table heading. In this menu we also have the Select Table menu.

There are cases when you need to select only rows, columns or cells. You can select a row or a column in many different ways although you should try them and select the one you like the most. These ways of selection are: Select column option in the heading menu of the column (width green zone). This is valid only to select a column. Click-and-maintain, dragging the mouse until you select the column/s or row/s completely. You can also do it by placing the mouse next to the top or left border of the column or row. The pointer becomes a black arrow. When you click, you select the column or the row the arrow is pointing. To select a row, place the mouse in any part of the row or on the <tr> label of the status bar, (or the <td> label to select the column), and click. To select many adjacent cells, you have to keep the mouse button pressed while you drag the cells you want to select. To select one cell or many non adjacent cells, you have to keep the Ctrl key pressed while you click on the cells.

Table format

The table properties are specified through its properties inspector. Through the properties inspector you can modify the specified values when you insert the table. At the same time, you can indicate others as the Align value (which allows one to align the table to the left, middle or right), the background color, or the background image. If you select a cell or a set of cells, the properties inspector changes in order to specify other colors. The top of the properties inspector in this case is used to specify the text properties which will be inserted in the selected cell (or cells). The inferior part is used to specify the value of the each cell such as the color or the background image (other than that specified in a global table), the cell border color, etc. Two options that you may possibly need to use frequently will be the Horz and Vert, which define the content of the cell in horizontal or vertical way.

To practice you can perform the Step by step exercise in Creating a table.

Changing table and cell sizes

As you know, the Width of a table can be defined in Pixels or as a Percentage. The table size through properties inspector will be set by the values of W (Width) and H (Height). Normally only width is specified, not height.

The W and H values of a cell are always in Pixels. It isn't necessary to set any of these values for cells unless you wish to maintain that size and don't want them to be adjusted to the window size.

The table and cells size can be specified not only through the properties inspector. You can also do it by maintaining the mouse pressed on any border,and dragging it to the position that you want. 

Unit 7. Setting up Tables (III)

Adding and clearing rows and columns

There are many ways of adding and clearing the rows and columns of a table. The first thing to do is to place the mouse in a cell or to select several of them, then unfold the table contextual menu by right clicking on it, or you can also open the Modify menu. In both cases you will see the Table option. Depending on the selected cells, some of the Table options will be able to be used and others won't. To insert a row or a column, just click on the Insert row or Insert column option. The row is inserted above the cell or the set of selected cells, and columns are inserted to its left.

We can also count with a full advanced option, the Insert rows or columns option. When you select this option you will see a new window where you can define whether you are going to insert rows or columns, their number, and their position.

To delete a row or a column, just place the mouse in the row or column you want to delete, and select Delete row or Delete column from the table menu. You can also select the row or the column you want to delete and press the DEL key.

To practice you can perform the Step by step exercise to Add and Eliminate rows.

Combining and Dividing cells

It is possible to insert tables into other tables. This is called to Nest tables. Next you have an example of a nesting. As you can see, in the first cell, another table has been inserted. To nest tables, you just have to place the mouse in the cell where you want to insert the new table, and then insert it the way we have just seen. Combine cells consists of converting 2 or more cells into just one. This will clear the separating border between the cells and they will become one. This can be useful, for example, to use the first row to write the table's title. In this case you would have to combine all the cells of the first row into just one. Dividing cells consists of spliting them. One of the ways of dividing or combining cells, is through the properties inspector. If many cells are chosen they can be combined by clicking on the button of the properties inspector (found at the bottom left of the properties panel, or by selecting the Merge cells option in the Table option. As you have seen, you can get there via the contextual menu of the table or via the Modify menu. You should remember that it is only possible to combine adjacent cells, or a combination which would lead to another new cell, in the example the result is a square. In the next table cells 1 and 4 cannot be combined, neither the cells 1, 2 and 3, because those combinations do not lead to a new squared cell. 1 2 3 4

To split a cell you have to click on the button of the properties inspector, or on the Split cell option of the Table submenu. In both cases, you will see a window like this, in which you need to specify whether the cell is going to be divided by rows or by columns, and the number of these.

To practice you can perform the Step by step Exercise on Combining rows.

Table modes

At the time of working with tables, Dreamweaver offers us many different view modes. We have worked all along in this unit with the standar mode, and we will continue working this way, but you can go to different modes through the View menu, and then selecting the Table mode option.

Inside this option we can choose the Standard mode, the Expanded Tables mode, or the Layout mode.

Layout mode is used to draw pages with a defined design based in tables. Using this view, the tables don't have to be obligatorily inserted into text lines as we have been doing up to this moment. They can be inserted into any part of the page, and Dreamweaver will fill the blank space to make it possible for the table to be shown in that position.

Expanded Tables mode adds temporary filling and cell space to a table. It also increases the table borders to make its edition easier. This mode can be used to select tables elements or to have the insertion point in the required way, but in this mode we don't see how the page will be shown.

We will limit this course just to the standard mode.