Ръководство за работа Отказ

Present content with tables

  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Learn how to use tables to present content in your web site. Also, learn how to split and merge table cells, and import and export tabular data.

Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. A table consists of one or more rows; each row consists of one or more cells. Although columns aren’t usually explicitly specified in HTML code, Dreamweaver enables you to manipulate columns as well as rows and cells.

Dreamweaver displays the table width and the column width for each table column when the table is selected or when the insertion point is in the table. Next to the widths are arrows for the table header menu and the column header menus. Use the menus for quick access to common table-related commands. You can enable or disable the widths and menus.

If you do not see a width for the table or for a column, then that table or column does not have a specified width in the HTML code. If two numbers appear, then the visual width as it appears in Design view doesn’t match the width specified in the HTML code. This can happen when you resize a table by dragging its lower-right corner or when you add content to a cell that’s larger than its set width.

For example, if you set a column’s width to 200 pixels and then add content that stretches the width to 250 pixels, two numbers appear for that column: 200 (the width specified in the code) and (250) in parentheses (the visual width of the column as it’s rendered on your screen).

Бележка:

You can also lay out your pages using CSS positioning.

Table formatting precedence in HTML

When formatting tables in Design view, you can set properties for the entire table or for selected rows, columns, or cells in the table. When a property, such as background color or alignment, is set to one value for the whole table and another value for individual cells, cell formatting takes precedence over row formatting, which in turn takes precedence over table formatting.

The order of precedence for table formatting is as follows:

  1. Cells
  2. Rows
  3. Table

For example, if you set the background color for a single cell to blue, then set the background color of the entire table to yellow, the blue cell does not change to yellow, since cell formatting takes precedence over table formatting.

Бележка:

When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each cell in the column.

About splitting and merging table cells

You can merge any number of adjacent cells—as long as the entire selection is a line or a rectangle of cells—to produce a single cell that spans several columns or rows. You can split a cell into any number of rows or columns, regardless of whether it was previously merged. Dreamweaver automatically restructures the table (adding any necessary colspan or rowspan attributes) to create the specified arrangement.

In the following example, the cells in the middle of the first two rows have been merged into a single cell that spans two rows.

Merged cells

Insert a table and add content

Use the Insert panel or the Insert menu to create a new table. Then, add text and images to table cells the same way that you add text and images outside of a table.

  1. Place the insertion point where you want the table to appear.

    Бележка:

    If your document is blank, you can place the insertion point only at the beginning of the document.

    • Select Insert > Table.

    • In the HTML category of the Insert panel, click Table.

  2. Set the attributes of the Table dialog box and click OK to create the table.
    Creating a table
    Creating a table

    Rows

    Determines the number of table rows.

    Columns

    Determines the number of table columns.

    Table Width

    Specifies the width of the table in pixels, or as a percentage of the browser window’s width.

    Border Thickness

    Specifies the width, in pixels, of the table’s borders.

    Cell Spacing

    Determines the number of pixels between adjacent table cells.

    Бележка:

    When you don’t explicitly assign values for border thickness or cell spacing and cell padding, most browsers display the table border thickness and cell padding set to 1 and cell spacing were set to 2. To ensure that browsers display the table with no border, padding or spacing, set Cell Padding and Cell Spacing to 0.

    Cell Padding

    Determines the number of pixels between a cell’s border and its contents.

    None

    Does not enable column or row headings for the table.

    Left

    Makes the first column of the table a column for headings, so that you can enter a heading for each row of the table.

    Top

    Makes the first row of the table a row for headings, so that you can enter a heading for each column of the table.

    Both

    Enables you to enter column and row headings in the table.

    Бележка:

    It’s a good idea to use headers in case any of your website visitors use screen readers. Screen readers read table headings and help screen-reader users keep track of table information.

    Caption

    Provides a table title which displays outside of the table.

    Summary

    Provides a table description. Screen readers read the summary text, but the text does not appear in the user’s browser.

Import and export tables

You can import tabular data that has been created in another application (such as Microsoft Excel) and saved in a delimited text format (with items separated by tabs, commas, colons, or semicolons) into Dreamweaver and format it as a table.

You can also export table data from Dreamweaver into a text file, with the contents of adjacent cells separated by a delimiter. You can use commas, colons, semicolons, or spaces as delimiters. When you export a table, the entire table is exported; you cannot select portions of a table to export.

Бележка:

If you want only some of the data from a table—for example, the first six rows or the first six columns—then copy the cells containing that data, paste those cells outside of the table (to create a new table), and export the new table.

Import table data

  1. Select File > Import > Import Tabular Data.

  2. Specify the options for the tabular data and click OK.

    Data File

    The name of the file to import. Click the Browse button to select a file.

    Delimiter

    The delimiter used in the file you’re importing.

    If you select Other, a text box appears to the right of the pop‑up menu. Enter the delimiter used in your file.

    Бележка:

    Specify the delimiter that was used when the data file was saved. If you don’t do this, the file will not be imported properly, and your data will not be correctly formatted in a table.

    Table Width

    The width of the table.

    • Select Fit to Data to make each column wide enough to fit the longest text string in the column.

    • Select Set to specify a fixed table width in pixels or as a percentage of the browser window’s width.

    Border

    Specifies the width, in pixels, of the table’s borders.

    Cell Padding

    The number of pixels between a cell’s content and the cell boundaries.

    Cell Spacing

    The number of pixels between adjacent table cells.

    Бележка:

    If you don’t explicitly assign values for borders, cell spacing, and cell padding, most browsers display the table with borders and cell padding set to 1, and cell spacing set to 2. To ensure that browsers display the table with no padding or spacing, set Cell Padding and Cell Spacing to 0. To view cell and table boundaries when the border is set to 0, select View > Visual Aids > Table Borders.

    Format Top Row

    Determines what formatting, if any, is applied to the top row of the table. Select from four formatting options: no formatting, bold, italic, or bold italic.

Export a table

  1. Place the insertion point in any cell of the table.
  2. Select File > Export > Table.
  3. Specify the following options:

    Delimiter

    Specifies which delimiter character should be used to separate items in the exported file.

    Line Breaks

    Specifies which operating system you’ll be opening the exported file in: Windows, Macintosh, or UNIX. (Different operating systems have different ways of indicating the end of a line of text.)

  4. Click Export.
  5. Enter a name for the file and click Save.

Select table elements

You can select an entire table, row, or column at once. You can also select one or more individual cells.

When you move your pointer over a table, row, column, or cell, Dreamweaver highlights all the cells in that selection so that you know which cells will be selected. This is useful when you have tables without borders, cells that span multiple columns or rows, or nested tables. You can change the highlight color in preferences.

Бележка:

If you position the pointer over a table’s border, then hold the Control key (Windows) or Command key (Macintosh), the entire structure of the table—that is, all cells in the table—is highlighted. This is useful when you have nested tables and want to see the structure of one of the tables.

Select an entire table

Do one of the following to select a table:

  • Click the upper-left corner of the table to select the table.
  • Click in a table cell, then select the tag in the tag selector at the lower-left corner of the Document window.
  • Click in a table cell, click the table header menu, then select Select Table. Selection handles appear on the selected table’s lower and right edges.
  • Click in a table cell, and select Edit > Table > Select Table.

Select individual or multiple rows or columns

  1. Position the pointer to point to the left edge of a row or the top edge of a column.
  2. When the pointer changes to a selection arrow, click to select a row or column, or drag to select multiple rows or columns.
    Select a row

Select a single column

  1. Click in the column.
  2. Click the column header menu and choose Select Column.

Select a single cell

  1. Do one of the following:

    • Click in the cell, then select the <td> tag in the tag selector at the lower-left corner of the Document window.
    • Control-click (Windows) or Command-click (Macintosh) in the cell.

Select a line or a rectangular block of cells

Do one of the following:
  • Drag from a cell to another cell.

  • Click in one cell, Control‑click (Windows) or Command-click (Macintosh) in the same cell to select it, then Shift-click another cell.

Select a block of cells

Select nonadjacent cells

Control‑click (Windows) or Command-click (Macintosh) the cells, rows, or columns you want to select.

If each cell, row, or column you Control‑click or Command-click isn’t already selected, it’s added to the selection. If it is already selected, it’s removed from the selection.

Change the highlight color for table elements

  1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Macintosh).
  2. Select Highlighting from the category list on the left, make either of the following changes, and click OK.
    • To change the highlighting color for table elements, click the Mouse-Over color box, then select a highlight color using the color picker (or enter the hexadecimal value for the highlight color in the text box).

    • To enable or disable highlighting for table elements, select or deselect the Show option for Mouse-Over.

    Бележка:

    These options affect all objects that Dreamweaver highlights when you move the pointer over them.  

Set table properties

You can use the Property inspector to edit tables.

  1. Select a table.
  2. In the Property inspector (Window > Properties), change properties as necessary.
    Table properties
    Table properties

    Table Id

    An ID for the table.

    Rows and Cols

    The number of rows and columns in the table.

    W

    The width of the table in pixels, or as a percentage of the browser window’s width.

    Бележка:

    You usually don’t need to set the height of a table.

    CellPad

    The number of pixels between a cell’s content and the cell boundaries.

    CellSpace

    The number of pixels between adjacent table cells.

    Align

    Determines where the table appears, relative to other elements in the same paragraph, such as text or images.

    Left aligns the table to the left of other elements (so that text in the same paragraph wraps around the table to the right); Right aligns the table to the right of other elements (with text wrapping around it to the left); and Center centers the table (with text appearing above and/or below the table). Default indicates that the browser should use its default alignment.

    Бележка:

    When alignment is set to Default, other content is not displayed next to the table. To display a table next to other content, use Left or Right alignment.

    Border

    Specifies the width, in pixels, of the table’s borders.

    Бележка:

    If you don’t explicitly assign values for the border, cell spacing, and cell padding, most browsers display the table with the border and cell padding set to 1 and cell spacing set to 2. To ensure that browsers display the table with no padding or spacing, set Border to 0, Cell Padding and Cell Spacing to 0. To view cell and table boundaries when the border is set to 0, select View > Visual Aids > Table Borders.

    Class

    sets a CSS class on the table.

    Бележка:

    You might need to expand the Table Property inspector to see the following options. To expand the Table Property inspector, click the expander arrow in the lower-right corner.

    Clear Column Widths and Clear Row Heights

    and Clear Row Heights delete all explicitly specified row height or column width values from the table.

    Convert Table Widths To Pixels

    and Convert Table Heights To Pixels set the width or height of each column in the table to its current width in pixels (also sets the width of the whole table to its current width in pixels).

    Convert Table Widths To Percent

    and Convert Table Heights To Percent set the width or height of each column in the table to its current width expressed as a percentage of the Document window’s width (also sets the width of the whole table to its current width as a percentage of the Document window’s width).

    If you entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.

Set cell, row, or column properties

You can use the Property inspector to edit cells and rows in a table.

  1. Select the column or row.
  2. In the Property inspector (Window > Properties), set the following options:

    Horz

    Specifies the horizontal alignment of the contents of a cell, row, or column. You can align the contents to the left, right, or center of the cells, or you can indicate that the browser should use its default alignment (usually left for regular cells and center for header cells).

    Vert

    Specifies the vertical alignment of the contents of a cell, row, or column. You can align the contents to the top, middle, bottom, or baseline of the cells, or indicate that the browser should use its default alignment (usually middle).

    W and H

    The width and height of selected cells in pixels, or as a percentage of the entire table’s width or height. To specify a percentage, follow the value with a percent symbol (%). To let the browser determine the proper width or height based on the contents of the cell and the widths and heights of the other columns and rows, leave the field blank (the default).

    By default, a browser chooses a row height and column width to accommodate and the widest image or the longest line in a column. This is why a column sometimes becomes much wider than the other columns in the table when you add content to it.

    Бележка:

    You can specify a height as a percentage of the total table height, but the row may not display at the specified percentage height in browsers.

    Bg

    The background color for a cell, column, or row, chosen with the color picker.

    Merge Cells

    Combines selected cells, rows, or columns into one cell. You can merge cells only if they form a rectangular or linear block.

    Split Cell

    Divides a cell, creating two or more cells. You can split only one cell at a time; this button is disabled if more than one cell is selected.

    No Wrap

    Prevents line wrapping, keeping all the text in a given cell on a single line. If No Wrap is enabled, cells widen to accommodate all data as you type it or paste it into a cell. (Normally, cells expand horizontally to accommodate the longest word or widest image in the cell, then expand vertically as necessary to accommodate other contents.)

    Header

    Formats the selected cells as table header cells. The contents of table header cells are bold and centered by default.

    Бележка:

    You can specify widths and heights as either pixels or percentages, and you can convert from pixels to percentages and back.

    Бележка:

    When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each cell in the column. When you set certain properties for a row, however, Dreamweaver changes the attributes of the tr tag rather than changing the attributes of each td tag in the row. When you’re applying the same format to all the cells in a row, applying the format to the tr tag produces cleaner, more concise HTML code.

  3. Press Tab or Enter (Windows) or Return (Macintosh) to apply the value.

Format tables and cells

You can change the appearance of tables by setting properties for the table and its cells or by applying a preset design to the table. Before you set table and cell properties, be aware that the order of precedence for formatting is cells, rows, and tables.

Бележка:

To format the text inside a table cell, use the same procedures you would use to format text outside of a table.

Change the format of a table, row, cell, or column

  1. Select a table, cell, row, or column.
  2. In the Property inspector (Window > Properties), click the expander arrow in the lower-right corner and change properties as necessary.
  3. Change the properties as necessary.

    For more information on the options, click the Help icon on the Property inspector.

    Бележка:

    When you set properties on a column, Dreamweaver changes the attributes of the td tag corresponding to each cell in the column. When you set certain properties for a row, however, Dreamweaver changes the attributes of the tr tag rather than changing the attributes of each td tag in the row, When you’re applying the same format to all the cells in a row, applying the format to the tr tag produces cleaner, more concise HTML code.

Add or edit accessibility values for a table in Code view

Edit the appropriate attributes in the code.
Бележка:

To quickly locate the tags in the code, click in the table, then select the <table> tag in the tag selector at the bottom of the Document window.

Add or edit accessibility values for a table in Design view

  • To edit the table caption, highlight the caption and type a new caption.
    • To edit the caption alignment, place the insertion point in the table caption, right-click (Windows) or Control‑click (Macintosh), then select Edit Tag Code.

    • To edit the table summary, select the table, right-click (Windows) or Control-click (Macintosh), then select Edit Tag Code.

Resizing tables, columns, and rows

Resizing tables

You can resize an entire table or individual rows and columns. When you resize an entire table, all of the cells in the table change size proportionately. If a table’s cells have explicit widths or heights specified, resizing the table changes the visual size of the cells in the Document window but does not change the specified widths and heights of the cells.

You can resize a table by dragging one of its selection handles. Dreamweaver displays the table width, along with a table header menu, at the top or bottom of the table when the table is selected or the insertion point is in the table.

Sometimes the column widths set in the HTML code do not match their apparent widths on the screen. When this happens, you can make the widths consistent. Table and column widths and header menus appear in Dreamweaver to help you lay out your tables; you can enable or disable the widths and menus as necessary.

Resizing columns and rows

You can change the width of a column or the height of a row in the Property inspector or by dragging the borders of the column or row. If you have trouble resizing, you can clear the column widths or row heights and start over.

Бележка:

You can also change cell widths and heights directly in the HTML code using Code view.

Dreamweaver displays column widths, along with column header menus, at the tops or bottoms of columns when the table is selected or the insertion point is in the table; you can enable or disable the column header menus as necessary.

Resize a table

Select the table. If you are in Live view, Element Display is shown when you select the table. Click the sandwich icon to enter the table formatting mode.

  • To resize the table horizontally, drag the selection handle on the right.

  • To resize the table vertically, drag the selection handle on the bottom.

  • To resize the table in both dimensions, drag the selection handle at the lower-right corner.

To exit the table formatting mode in Live view, press Esc or click outside the table. You can use Edit > Table menu options to modify the table further.

Note: The options in Edit > Table menu vary based on whether you have selected the entire table or a single cell. In Live view, Element Display shows 'table' when the entire table is selected and 'td' when a specific cell is selected. To switch from a cell formatting to table formatting mode, click the table border.

Change a column’s width and keep the overall table width

  1. In Design view, drag the right border of the column you want to change.

    The width of the adjacent column also changes, so you actually resize two columns. Visual feedback shows you how the columns will adjust; the overall table width does not change.

    Change column width while maintaining table width

    Бележка:

    In tables with percentage-based widths (not pixels), if you drag the right border of the rightmost column, the entire table’s width changes, and all of the columns grow wider or narrow proportionately.

Change a column’s width and maintain the size of the other columns

  1. In Design view, hold the Shift key and drag the column’s border.

    The width of one column changes. Visual feedback shows you how the columns will adjust; the overall table width changes to accommodate the column you are resizing.

    Change column width while other columns maintain their width

Change a row’s height visually

Drag the lower border of the row.

Make column widths in code consistent with visual widths

  1. Click in a cell.
  2. Click the table header menu, then select Make All Widths Consistent.

    Dreamweaver resets the width specified in the code to match the visual width.

Clear all set widths or heights in a table

  1. Select the table.
  2. Do one of the following:
    • Select Edit > Table > Clear Cell Widths, or Edit > Table > Clear Cell Heights.

    • In the Property inspector, (Window > Properties), click the Clear Row Heights button or the Clear Column Widths button .

    • Click the table header menu, then select Clear All Heights or Clear All Widths.

Clear a column’s set width

Click in the column, click the column header menu, and select Clear Column Width.

Enable or disable table and column widths and menus in Design View

Select View > Design View Options > Visual Aids > Table Widths.

Add and remove rows and columns

To add and remove rows and columns, use the Modify > Table or column header menu.

Бележка:

Pressing Tab in the last cell of a table automatically adds another row to the table.

Add a single row or column

Click in a cell and do one of the following:
  • Select Edit > Table > Insert Row or Edit > Table > Insert Column.

    A row appears above the insertion point or a column appears to the left of the insertion point.

  • Click the column header menu, and then select Insert Column Left or Insert Column Right.

     

Add multiple rows or columns

  1. Click in a cell.
  2. Select Edit > Table > Insert Rows Or Columns, complete the dialog box, and click OK.

    Insert

    Indicates whether to insert rows or columns.

    Number of Rows or Number of Columns

    The number of rows or columns to insert.

    Where

    Specifies whether the new rows or columns should appear before or after the row or column of the selected cell.

Delete a row or column

Do one of the following:
  • Click in a cell within the row or column you want to delete, then select Edit > Table > Delete Row, or Edit > Table > Delete Column.

  • Select a complete row or column, then press Delete.

  • In the Property inspector (Windows > Properties), do one of the following:
    • To add or delete rows, increase or decrease the Rows value.
    • To add or delete columns, increase or decrease the Cols value.
Бележка:

Dreamweaver does not warn you if you are deleting rows and columns that contain data.

Split and merge cells

Use the Property inspector or the options in the Edit > Table submenu to split or merge cells.

Merge two or more cells in a table

  1. Select the cells in a contiguous line and in the shape of a rectangle.

    In the following illustration, the selection is a rectangle of cells, so the cells can be merged.

    Cells can be merged in a rectangle of cells

    In the following illustration, the selection is not a rectangle, so the cells can’t be merged.

    Cells cannot be merged if the selection is not a rectangle

  2. Do one of the following:
    • Select Edit > Table > Merge Cells.

    • In the expanded HTML Property inspector (Window > Properties), click Merge Cells.

    Бележка:

    If you don’t see the button, click the expander arrow in the lower-right corner of the Property inspector so that you see all the options..

    The contents of the individual cells are placed in the resulting merged cell. The properties of the first cell selected are applied to the merged cell.

Split a cell

  1. Click in the cell and do one of the following:
    • Select Edit > Table > Split Cell.

    • In the expanded HTML Property inspector (Window > Properties), click Split Cell.

    Бележка:

    If you don’t see the button, click the expander arrow in the lower-right corner of the Property inspector so that you see all the options.

  2. In the Split Cell dialog box, specify how to split the cell:

    Split Cell Into

    Specifies whether to split the cell into rows or columns.

    Number Of Rows/Number Of Columns

    Specifies how many rows or columns to split the cell into.

Increase or decrease the number of rows or columns spanned by a cell

Do one of the following:
  • Select Edit > Table > Increase Row Span, or Edit > Table > Increase Column Span.

  • Select Edit > Table > Decrease Row Span, or Edit > Table > Decrease Column Span.

Copy, paste, and delete cells

You can copy, paste, or delete a single table cell or multiple cells at once, preserving the cells’ formatting.

You can paste cells at the insertion point or in place of a selection in an existing table. To paste multiple table cells, the contents of the Clipboard must be compatible with the structure of the table or the selection in the table in which the cells will be pasted.

Cut or copy table cells

  1. Select one or more cells in a contiguous line and in the shape of a rectangle.

    In the following illustration, the selection is a rectangle of cells, so the cells can be cut or copied.

    Cells can be cut or copied in a rectangle of cells

    In the following illustration, the selection is not a rectangle, so the cells can’t be cut or copied.

    Cells cannot be cut or copied if the selection is not a rectangle

  2. Select Edit > Cut or Edit > Copy.
    Бележка:

    If you selected an entire row or column and you select Edit > Cut, the entire row or column is removed from the table (not just the contents of the cells).

Paste table cells

  1. Select where you want to paste the cells:
    • To replace existing cells with the cells you are pasting, select a set of existing cells with the same layout as the cells on the clipboard. (For example, if you’ve copied or cut a 3 x 2 block of cells, you can select another 3 x 2 block of cells to replace by pasting.)

    • To paste a full row of cells above a particular cell, click in that cell.

    • To paste a full column of cells to the left of a particular cell, click in that cell.

    Бележка:

    If you have less than a full row or column of cells in the clipboard, and you click in a cell and paste the cells from the clipboard, the cell you clicked in and its neighbors may (depending on its location in the table) be replaced with the cells you are pasting.

    • To create a new table with the pasted cells, place the insertion point outside of the table.
  2. Select Edit > Paste.

    If you are pasting entire rows or columns into an existing table, the rows or columns are added to the table. If you are pasting an individual cell, the contents of the selected cell are replaced. If you are pasting outside a table, the rows, columns, or cells are used to define a new table.

Remove cell content but leave the cells intact

  1. Select one or more cells.
    Бележка:

    Make sure the selection does not consist entirely of complete rows or columns.

  2. Press Delete.

    Бележка:

    If only complete rows or columns are selected when you select Edit > Clear or press Delete, the entire rows or columns—not just their contents—are removed from the table.

Delete rows or columns that contain merged cells

  1. Select the row or column.
  2. Select Edit > Table > Delete Row, or Edit > Table > Delete Column.

Nest tables

A nested table is a table inside a cell of another table. You can format a nested table as you would any other table; however, its width is limited by the width of the cell in which it appears.

  1. Click in a cell of the existing table.
  2. Select Insert > Table, set the Insert Table options, and click OK.

Sort tables

You can sort the rows of a table based on the contents of a single column. You can also perform a more complicated table sort based on the contents of two columns.

You cannot sort tables that contain colspan or rowspan attributes—that is, tables that contain merged cells.

  1. Select the table or click in any cell.
  2. Select Edit > Table > Sort Table, set the options in the dialog box, and click OK.

    Sort By

    Determines which column’s values will be used to sort the table’s rows.

    Order

    Determines whether to sort the column alphabetically or numerically, and whether to sort it in ascending order (A to Z, lower numbers to higher numbers) or descending order.

    When the contents of a column are numbers, select Numerically. An alphabetic sort applied to a list of one- and two-digit numbers results in the numbers being sorted as if they were words (resulting in ordering such as 1, 10, 2, 20, 3, 30) rather than being sorted as numbers (resulting in ordering such as 1, 2, 3, 10, 20, 30).

    Then By/Order

    Determines the sorting order for a secondary sort on a different column. Specify the secondary-sort column in the Then By pop‑up menu, and the secondary sort order in the Order pop‑up menus.

    Sort Includes The First Row

    Specifies that the first row of the table should be included in the sort. If the first row is a heading that should not be moved, do not select this option.

    Sort Header Rows

    Specifies to sort all the rows in the table’s thead section (if any) using the same criteria as the body rows. (Note that thead rows remain in the thead section and still appear at the top of the table even after sorting.) For information about the thead tag, see the Reference panel (select Help > Reference).

    Sort Footer Rows

    Specifies to sort all the rows in the table’s tfoot section (if any) using the same criteria as the body rows. (Note that tfoot rows remain in the tfoot section and still appear at the bottom of the table even after sorting.) For information about the tfoot tag, see the Reference panel (select Help > Reference).

    Keep All Row Colors The Same After The Sort Has Been Completed

    Specifies that table row attributes (such as color) should remain associated with the same content after the sort. If your table rows are formatted with two alternating colors, do not select this option to ensure that the sorted table still has alternating-colored rows. If the row attributes are specific to the content of each row, then select this option to ensure that those attributes remain associated with the correct rows in the sorted table.

 Adobe

Получете помощ по-бързо и по-лесно

Нов потребител?

Adobe MAX 2024

Adobe MAX
Конференцията, посветена на креативността

14 – 16 октомври, Маями Бийч и онлайн

Adobe MAX

Конференцията, посветена на креативността

14 – 16 октомври, Маями Бийч и онлайн

Adobe MAX 2024

Adobe MAX
Конференцията, посветена на креативността

14 – 16 октомври, Маями Бийч и онлайн

Adobe MAX

Конференцията, посветена на креативността

14 – 16 октомври, Маями Бийч и онлайн