CIS 3630 - Test 3a

  1. Organize data and page layout
    • XHTML by itself does not have these features such as "quick create" or "table draw" for creating tables
    • Until recently, XHTML tables were used both as a means for organizing data and for creating page layout
    • Although XHTML tables are still used to organize data, CSS is now the preferred method for creating page layout
    • To organize data, you create a data table, which is a table whose sole purpose is to align text and numbers in columns and rows, usually for a small section of the page
    • For page layout, you create a layout table, which is a table intended to occupy the entire page and align all of the text and images on the page
    • Any element can be placed inside a cell - text, images, and even another table, so a layout table can contain a data table
  2. Nested table
    • Results when you place a table inside another table
    • A table placed within another cell in a table
  3. Tracer lines
    • After the table has been created, you will switch to Code view to show the XHTML table code; Expression Web shows you table tracer lines
    • The dotted lines that outline each of the table cells
  4. Creating a table
    • Click Table on the menu bar, and then click Insert Table
    • In the Insert Table dialog box, enter the number of rows and columns for the table
    • Optionally, make choices for layout, borders, and background
    • Alternatively, to create a table, click the Insert Table button on either the Common toolbar or the Standard toolbar. Click and drag the mouse to determine the rows and columns for the table. Click to create the table

    Tables begin with the start [table] tag and end [/table] tag. Tables can be placed anywhere within the [body] [/body] tags. Table rows are created by entering the XHTML code for the start table row tag [tr] and the end table row tag [/tr]. The table cells are created by entering code for the start [td] table data tag and the end [/td] table data tag. XHTML also has [th] tag, which is a table header tag. The table header tag formats text to appear as both bold and centered hoizontally within a cell.

    By default, Expression Web creates the table to be 100% of the screen width.
  5. & n b s p
    Special character used to create a space, in this instance, just a placeholder content in the cells
  6. Table borders
    • The horizontal and vertical ruled lines both outside and inside the table
    • Often referred to as the table gridlines or the table grid
    • By default, a table does not show the gridlines
    • To see the table borders in the browser, you must add the border attribute to the start table tag and assign the border attribute a value of at least one pixel; ex.: [table border="1" style="width: 100%"]

    Eliminating the borders in a layout table is often referred to as giving the table a "seamless" appearance
  7. Setting the Table Properties
    • Right click anywhere in the table and then click Table Properties from the shortcut menu
    • Alternatively, click Table on the menu bar, point to Table Properties and then click Table
    • In the Table Properties dialog box, make choices among the following groups:
    • * Size - The number of rows and column
    • * Layout - Choices for alignment, float, cell padding, cell spacing, width and height
    • * Borders - Choices for size, color, and collapsing the table border
    • * Background - Choices for color and background picture
    • * Layout tools - An option to enable layout tools
    • * Set - An option to make the selected settings the default choices for new tables

    If the table were less than 100% of the screen width, you could set the alignment of the table to be either left, right, or center. You can enter a value of either Left or Right as the value for Float. Entering a value of Left will cause the table to appear at the left edge of the screen, and text will wrap around the table on the right; and vice versa. Of course, if the table has a width of 100%, there can be no wrapping. The value of Default will cause the table not to float either left or right.

    It will help to see the inside borders of the table. When you set the table properties earlier and changed the border width, it changed the size of the outside borders and delete the border attribute in the code, so you no longer can see the interior borders. You can change the table cell properties to add a colored border to the interior cells.
  8. Cell padding
    White space that surrounds the contents of a table cell, will make the cell contents more readable if you have chosen to display the table gridlines
  9. Cell spacing
    Used to increase the distance between the table cells

    Note that in addition to specifying a width for the table, you can also specify a height. The Specify height check box is not checked by default. Expression Web adjusts the height of the table so that none of the rows are truncated, which means the table would be shortened, and some rows at or near the end of the table might not appear in the browser
  10. Collapse table border
    If you check this check box, Expression Web will use the CSS border-collapse property to create a single ruled line, rather than a double ruled line, for the interior gridlines of the table
  11. Insert a row or column
    • Click to position the insertion point where you want to insert a row or column
    • Click Table on the menu bar, point to Insert, and then choose one of the following: (1) Column to the Left; (2) Column to the Right; (3) Row Above; or (4) Row Below

    • To insert more than one row or column, select multiple rows or multiple columns before clicking Table on the menu bar
    • To select the contents of a row or column, pass the pointer over the outside border of a row or column. When the selection arrow appears, click the left mouse button.

    Alternatively, to insert a row above, press the Ctrl+Alt+up arrow keys; to insert a row below, press the Ctrl+Alt+down arrow keys

    • Alternatively, to delete a column, position the insertion point to the first cell, point to the top border until the downward-pointing arrow appears; click the top border of the column, and press the Delete key
    • To delete more than one column or row, just select the columns or rows before you click Table on the menu bar
  12. Inserting an Excel worksheet
    If you have data in an Excel worksheet, you can easily import that worksheet into Expression Web to create an XHTML table. An Excel spreadsheet can have multiple worksheets, so make sure the spreadsheet only has a single worksheet. You do not have to save the file in a different file format in Excel. Just save the file as you normally would, using the .xls format (Office 2003) or .xlsx format (Office 2007). In Expression Web, create a one-cell table. Click inside the cell, click Insert on the menu bar, and then Click File. Browse to the location of the Excel worksheet you want to import. Make sure you select All Files in the Files of type list box. Click Open. An alert will appear, stating the file is being converted from .rtf (rich text format) format. When the file opens in Expression Web, select the entire table and reduce the font sizes if necessary.
  13. Table Fill feature
    • Quick way to fill in table cells with duplicate data
    • Click anywhere in the cell
    • Hold down the mouse button and drag until that cell and the other cells that you want to paste below it
    • Click the Table on the menu bar, point to Fill, and then click Down
  14. Distribute Columns Evenly button
    • To adjust the columns to have a consistent width
    • Button is found in the Tables toolbar
  15. Shift+Enter keys
    Line break, a new line entered
  16. Merging cells
    Combining one or more table cells
  17. Splitting cells
    Dividing the cells of a table
  18. Merging or splitting cells
    • To merge cells:
    • * Click anywhere inside the first cell to be merged
    • * Click and drag to select the cells to be merged
    • * Click Table on the menu bar, point to Modify, and then click Merge Cells
    • * Alternatively, select the cells to be merged and on the Tables toolbar, click the Merge Cells button

    • To split cells:
    • * Click anywhere in the cell to be split
    • * Click Table on the menu bar, point to Modify, and then click Split Cells
    • * Alternatively, click anywhere in the cell to be split, and on the Table toolbar, click the Split Cells button
    • * Click either the Split into columns option button or the Split into rows option button
    • * Enter a value in the text box for the number of rows or columns to be split

    • When selecting data for the last cell in the table, select text starting in that cell and then click and drag up or to the left.
    • In a data table, it's common to have alternating colors for rows, which is called "row striping."
  19. Foreground color
    Color for the text
  20. Caption
    • A brief description of the table contents
    • A description of a table that can be positioned above or below the table
    • The caption text is displayed in the browser
    • A table caption is optional, but it helps to identify the data in a table, especially if the table is complex and has a great deal of numeric data
    • A caption is part of the table; if you have formatted the table to appear in the Arial font, the caption will have a similar appearance
    • By default, the caption appears above the table, but it is much more common to display the caption below the table (this choice will work well with the Internet Explorer browser, but not in the Firefox browser)
  21. Creating a table caption
    • Click anywhere inside the table
    • Click Table on the menu bar point to Insert, and then click Caption
    • Enter the caption text
    • To position the caption - (1) Right-click anywhere within the caption, (2) click Caption Properties from the shortcut menu, (3) Click either the Top of table or Bottom of table option button
  22. Using the caption-side property
    • CSS has a property called caption-side that you can use to position captions. Unfortunately, the caption-side property has little browser support. Until this property becomes widely supported, continue to position the caption above or below the table. The caption-side property takes the following values:
    • * left - The caption is displayed above the table at the left edge of the screen.
    • * right - The caption is displayed above the table at the right edge of the screen.
    • * top - The caption is displayed above the table and centered. This is the default choice.
    • * bottom - The caption is displayed below the table and centered.
  23. Page layout
    • Today, Web developers typically use CSS for page layout
    • However, this was not true several years ago, and many Web sites still rely on tables for layout
  24. Layout table
    • A table used to arrange objects on a page for a design layout
    • Expression Web has several means of creating a layout table
    • It has a table draw feature that allows you to sketch a design of the layout you want
    • Expression Web also has a template gallery of commonly used table layouts
    • Eliminating the borders in a layout table is often referred to as giving the table a "seamless" appearance
  25. Creating a table layout
    • Create a blank Web page, Rename, and save the file
    • Click the Task Panes on the menu bar, and then click Layout Tables to display the Layout Tables task pane
    • Click the Maximize Window button to expand the Layout Tables task pane and view the Table layout style gallery
    • Choose one of the following - (1) Click the Insert Layout Table link to create a one-cell layout table; (2) Click the Draw Layout Table button then click and drag the pencil icon in the Editing window to create a one-cell table; or (3) Click any of the templates in the Table layout pane
    • Click in a cell and add content
    • Optionally, create a width and height for the layout table by entering values in the Width and Height text boxes

    • Although there isn't any content in the table, by changing the border value to 4, you will be able to see the table in the browser. It's always a good practice to confirm that the table layout is correct before you begin entering content into the table.
    • The table element is a block-level element. It can have padding, margins, and a border, and it can float left or right.
  26. Valign attribute
    • Expression Web uses the XHTML valign attribute to align text at the top, the middle, or the bottom of a cell
    • The valign attribute is deprecated; use the CSS vertical-align property instead
  27. Setting vertical alignment
    • Right click in a cell
    • Click Cell Properties from the shortcut menu
    • In the Cell Properties dialog box, click the Vertical alignment list arrow
    • Click either Top, Middle, Baseline, or Bottom
  28. Edit the caption code so that it appears below the table in all browsers and versions
    valign = "bottom" align = "bottom"
  29. Footer cell
    • Will include e-mail link
    • The contact and copyright information usually appears in a smaller point size
  30. Converting text to a table
    If you have a text on a Web page, you may be able to convert that text into a table. Text that is separated by paragraphs should convert without problems. XHTML does not support the tab character as a data separator, so you might have trouble (or some reformatting to do) if the text has tabs. Similarly, you can use the comma as a separator. However, if the text contains numbers, such as 1,000,000, you again might have problems converting the "text" to a table. To convert text to a table, open the Web page with the text. Select the text you want to convert to a table. Click Table on the menu bar, point to Convert, and then click Text to Table. The Convert Text to Table dialog box will open. Click the option button for the character you want to use to separate text (paragraph, tab, or comma). Click the OK button. You can also convert a table to text by performing the following steps - Select the table data to be converted to text, click Table on the menu bar, point to Convert, and click Table to Text. The table data will be converted to paragraph text.
  31. Table AutoFormat feature
    • The Expression Web feature that formats at table based on a template style
    • If you do not want to style table elements individually, you can use this feature
    • Can quickly apply formatting to a table
    • You choose a design template from those in the Table AutoFormat feature, which is similar to how you chose a design template from the Layout Tables task pane
  32. Using the Table AutoFormat feature
    • Click anywhere in the table
    • Click Table on the menu bar, point to Modify, and then Click Table AutoFormat
    • In the Table AutoFormat dialog box, in the Formats list box, click the format you want to apply to the table
    • Optionally, click the check boxes to select or deselect Formats to apply and Apply special formats
  33. Data table
    A table used to align data horizontally and vertically in a grid pattern
  34. Table draw feature
    The Expression Web feature that allows you to manually draw a table
  35. Table grid/gridline
    The horizontal and vertical lines around and within a table
  36. Template gallery
    An image library of styles
  37. Truncated
    Cut off or shortened
Author
fairlady
ID
17255
Card Set
CIS 3630 - Test 3a
Description
Chapter 7 only
Updated