Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Client Technologies - Adobe Dreamweaver CS3

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Tables - Adobe Dreamweaver CS3

As useful as tables are, they often are time consuming and confusing to code by hand in XHTML.

Tables

As useful as tables are, they often are time consuming and confusing to code by hand in XHTML. Dreamweaver offers easy-to-use table-editing commands. Open the Table dia-log by selecting Table from the Insert menu, clicking the Table button in the Insert bar or pressing <Ctrl><Alt>-T. The Table dialog (Fig. 20.20) allows us to select the number of rows and columns, the width of the table and several other related settings.

 

Figure 20.21 is a simple table with two rows, two columns and no border. Once the table is placed, you can manipulate its size. Click in a cell and press <tr> in the tag selector (Fig. 20.2) at the bottom of the Document window to select that row. Pressing the Delete key removes the row from the table. You can highlight an individual cell by clicking <td> in the tag selector. Holding down the Ctrl key, then clicking multiple cells allows them all to be selected simultaneously. Clicking the Merge Cells button in the Property Inspector while two adjacent cells are selected combines the cells into one (Fig. 20.22). Dream-weaver uses the colspan and rowspan attributes of the <td> tag to merge cells. Select a cell and click the Split Cell button in the Property Inspector to open the Split Cell dialog, which allows you to divide the selected cell into any number of rows or columns (Fig. 20.23).

 

The Property Inspector allows us to manipulate the selected table, or a portion of the table. While a cell is selected, its text attributes can be adjusted just as we demonstrated earlier in the chapter. In addition, background and border colors can be assigned to cells, groups of cells or an entire table. We can adjust a cell’s height and width in the Property Inspector. To manually adjust a cell’s size, you can also click and drag its border lines.



We now recreate the table of Fig. 4.11. Make a four-row and five-column table that spans 90% of the page with a one-pixel border. Click the top-left cell, hold the Shift key and click the cell below it—another way to select multiple cells. Two of the leftmost cells should now be selected. Merge them by right clicking in either cell and selecting Table > Merge Cells (Fig. 20.24) or select Merge Cells in the Property Inspector as we did before.


To make space for the title of the table, select the top four cells (again using the Shift key) and merge them together. The layout of the table should now resemble Fig. 20.25. Now, type in the text and insert the image.

 

To increase the visual appeal of the table, add color by selecting the desired cells and adjusting their background color in the Property Inspector. The size of rows and columns also can be adjusted by changing the H (height) and W (width) field values in the Property Inspector or by clicking and dragging the boundaries between cells.






Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.