Web Principles / Expression Web

Transcription

1 Web Principles / Expression Web Tables using Expression Web Notes Quick Links Table Concepts Creating a Table Add / Deleting Rows and Columns Change Row Height / Column Width Table Properties Cell Properties Images in Cells Merging & Splitting Cells Tables Within Tables Table Tips Activity Table Concepts Cells, rows and columns Each individually customizable Borders Can be hidden and otherwise customized Cell padding Distance between cell contents and inside edge of cells (measured in pixels) Cell spacing Distance between cells. Extra space can be added between the right edge of one cell and the left edge of another. Page 1 of 10

2 Creating a Table Creating and editing a table in Expression Web is similar to creating a table in Word. Design (sketch) the table first. Makes life easier if you have the right number of rows and columns to start with Click the Insert Table button on the toolbar Click in lower right corner to specify number of rows and columns to include in the table If not enough rows or columns display, drag any cell to display more Can also choose Table Insert Table from the menu Open the Unit 8 folder as an Expression Web site Ensure the site settings are correct Add a 3 x 3 table to a web page Page 2 of 10

3 Adding / Deleting Rows and Columns Working with tables is often simplified by showing the Tables toolbar Right-click any toolbar Click the Tables toolbar on the pop-up menu Most menu options are also available by rightclicking and choosing from the popup menu. Display toolbar and discuss each button Practice selecting rows and columns Select columns 1 and 3 Deleting Select row or column to be deleted by pointing to top edge (column) or left edge (row) Drag to select multiple rows or columns Ctrl-click to select non-connected rows or columns Right-click in the selection and choose Delete Cells, Delete Rows or Delete Columns (Delete Cells always works) Can t simply press Delete key, that erases the cells but doesn t remove them. Alternatively, you can click the Delete Cells button on the Tables toolbar. Adding Select row or column to insert before or after Right-click and choose the appropriate insert option Select multiple rows or columns to insert multiple rows or columns. Alternatively, you can click the Insert Columns or Insert Rows button on the Tables toolbar (no selection required) Adding new row to bottom of table Place cursor in bottom-right-most cell Press the Tab key Delete columns Undo Select row two Insert a row above Place cursor in last cell Add a row below Page 3 of 10

4 Changing Row Height and Column Width Place your mouse pointer on the right edge of the column to resize or on the bottom of the row to resize. The pointer will change to a double-headed arrow Drag to resize the column / row Resize the leftmost column first, then work your way to the right. You can only resize one row / column at a time Double-click to autosize the row / column The row / column size will be adjusted to fit the largest item in the row / column If you resize the right-most column, the width of the table will change When you resize a row or column, its changes from a percent measurement to a pixel measurement. Table Properties Right-click anywhere in table, select Table Properties from pop-up menu Specify Width and Height: Allows you specify the width of the table Recommend sticking with percent. Table will automatically resize to percentage of current window size. Can specify pixel size. Table will always be the same size regardless of the current window size. You can also change the table size by dragging the handles on the right or bottom of table when the table is selected When you resize by dragging the new value is designated as a % Alignment If table is not 100% of width, where should table appear between margins (left, right, center) Float Can text wrap around table (default=no) Left: text wraps on right Right: text wraps on left Can t do both May have to move table into an existing paragraph to start wrapping Select entire table (menu: Table Select Table) Point anywhere in table, drag to new location Add first name to first cell Size column to fit Right-click column A. Cell Properties. Note column A measured in pixels Drag the right edge of the table to the left a little Access table properties. Note table width is still a % Center the table Page 4 of 10

5 Cell Padding Number of pixels between inside cell borders and text must be the same for all cells must be the same on all sides: top, left, bottom, right If you need more control, use HTML Cell spacing Space between borders of adjacent cells Again, if you need finer control, use HTML Border Properties Border Size Width in pixels of outside table border only (depth of 3D effect) Set to 0 to remove all borders in table. Leave cell padding and spacing so cells don t merge. To set the color of the inside, cell borders: Select the cells to be changed (be careful not to select the entire table) Right-click, Cell Properties Cells can be customized You can also collapse the table borders (remove spacing) by selecting the Collapse table border check box. Change the cell padding to 5 (px) Add a dark green 2 px border to the table Change the inside borders to a 1 px dark green border. (Apply) Collapse the table borders Page 5 of 10

6 Background Color Select color from drop-down list Color of cell spacing changes too Set Collapse Borders option in table properties to remove spacing between borders Change border size for thicker borders Any colors specified for cells override this color selection Image Can use any image Click Browse button to locate on disk Tiled if necessary (can t turn off and center) Resize using drawing program if necessary Great for applying textures etc. Covers any background color Cell spacing allows the image to show through Cell color specifications override the image in that area Cell borders on top of image Change the background color to a pale green Page 6 of 10

7 Cell Properties Horizontal and Vertical Alignment Size Try to specify using a percentage. If change value, column to right will also change to compensate Sometimes, all columns adjust Can also drag a column to resize Point to right border and drag To make all columns (or rows) the same size Select columns or rows, choose Distribute Columns Evenly from the Modify menu to reset column widths Header Cell Automatically bolds the text in the cell No Wrap Don t wrap text in cell poor selection if using percentages for table and cell size Background image Same features as table background image (see above) Overrides table background color and image Background color Same features as table background image (see above) Overrides table background color and image Cell spanning See Merging and Splitting Cells below Make the column with the name wider. Center Set vertical alignment to top. Undo. Designate the first row as header cells Set the background color of the bottom row to a pale yellow Page 7 of 10

8 Images in Cells To place an image in a cell Place the cursor in the cell you want to contain the image Click the Insert Image button on the toolbar Use the sizing handle to resize the image Use the alignment feature to change the location of the image in the cell. By placing images in cells, you can place the image anywhere on the page and still have text wrap around it anyway you want, in the adjoining cells. If you place an image in a cell, it will not resize (percent) when the window is resized. The image will always display in the size you specify. Text in adjoining cells will still adjust to fit size of the window. Page 8 of 10

9 Merging and Splitting Cells Can use row and column span (cell properties), but much easier to merge and split cells Merging/Combining Cells Select cells to merge (must be rectangularly shaped) Right-click and choose Merge (or Table Merge Cells from menu) Definitions of columns and rows can become difficult when cells are merged Use caution when merging cells that already contain data. As far as I can tell, the merged area retains the contents and formatting of the upper-left cell. All other formatting and contents are deleted. Splitting Cells Select the cell to split. Right-click and choose Modify (or Table Modify from menu) Specify rows or columns Specify number of times to split Merge all the cells in the top row. Remove the name. Replace with Stevens Point Gardening Club X-Large Change background color of title to white, text color green Merge bottom three rows Insert tulip picture as background Make row taller until image tiles vertically. Merge three cells of center column Insert gardener picture Size column to fit Make background transparent Split left column into two columns Split bottom row into two rows Resize to match wrapping in sample Merge top row Enter text Tables within Tables To create even more flexibility in table layout, you can create a table within a cell of another table. I have found that by splitting and/or merging cells in the right combinations, I can avoid having to have tables inside tables. Repeat for 3 rd column Remove all the officer information. Replace with a 4x2 table Align in top of cell Page 9 of 10

10 Table Tips As in HTML, always leave (at least) one column in your table sized as a percent so the table s width will adjust with the window size (when appropriate) Use merging and splitting instead of embedded tables whenever possible. Page 10 of 10