Achieving Page Layout with Tables in Java

Print Data Matrix in Java Achieving Page Layout with Tables

borders The Properties panel shows fields for the number of rows and columns, the table width, the table height, the border size, cell padding, cell spacing, and so on Even a small table requires a chunk of HTML code A table tag, <table>, marks the beginning of the table This tag contains the table s attributes, including width, border, cellpadding, and cellspacing Each row of the table is marked with a table-row tag, <tr>, and the columns in that row are marked with table-data tags, <td> For instance, if you create a table 600 pixels wide with no borders, no cell spacing, and no cell padding, which has two rows and three columns per row, the HTML in Code view looks something like this:

<table width="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td>Row 1 Col 1 goes here</td> <td>Row 1 Col 2 goes here</td> <td>Row 1 Col 3 goes here</td> </tr> <tr> <td>Row 2 Col 1 goes here</td> <td>Row 2 Col 2 goes here</td> <td>Row 2 Col 3 goes here</td> </tr> </table>

The table that you create from the Insert Table dialog box is great for organizing rows and columns of data A layout table, however, almost never looks like a data table A single row often stretches across several columns, or a single column straddles several rows You can change the boring data-table structure into something more graphically interesting by merging and splitting cells To combine cells, you must first select them Normally, you can select a cell by clicking inside it However, since you need to choose multiple cells for merging, you hold down the CTRL key (Windows) or COMMAND key (Mac) while you click the cells Then go to the Properties panel and find the Merge Selected Cells button, shown here Click this button, and the cells fuse into one You can also choose Modify | Table | Merge Cells to merge the cells, or you can right-click the selection and choose Table | Merge Cells from the context menu Keep in mind that you can merge only contiguous cells cells that touch each other in the table structure

4:

To split a single cell into several rows or columns, select the cell, go to the Properties panel and click the Split Cell button You can also choose Modify | Table | Split Cell or right-click for the context menu and choose Table | Split Cell No matter how you get there, the Split Cell dialog box appears, as shown here Indicate whether you want to split the cell into rows or columns, specify the number of rows or columns you want to create, and click OK

Dreamweaver achieves merging and splitting with the colspan and rowspan attributes of the table-data tag The colspan attribute determines how many columns the current bit of table data should occupy Similarly, the rowspan attribute determines the number of rows A layout table with one large cell on the left for the navigation that straddles three content cells on the right has the following structure:

<table> <tr> <td rowspan="3">Navigation goes here</td> <td>First cell for content</td> </tr> <tr> <td>Second cell for content</td> </tr> <tr> <td>Third cell for content</td> </tr> </table>

By comparison, a table with one large cell along the top for navigation that straddles two content cells beneath it looks something like this:

Three commands are used for inserting table rows and columns: Insert Row, Insert Column, and Insert Rows Or Columns You can find these commands under Modify | Table in the main menu or in the context menu that appears when you right-click a table cell To insert one row above the currently selected cell, choose Insert Row To insert one column to the left of the currently selected cell, choose Insert Column To insert a variable number of rows above or below the currently selected cell, or to insert a variable number of columns before or after, choose Insert Rows Or Columns This command opens the Insert Rows Or Columns dialog box, shown next Fill out the dialog and click OK

A quick reference to help you figure out which command to use for inserting rows and columns is found in the next Scenario and Solution Two commands are used for deleting table rows and columns Delete Row and Delete Column, both of which appear in the same menus as the commands for inserting rows and columns The Delete Row command deletes the row of the currently selected