The XHTML WYSIWYG Editor For Desktop & Web Applications
Skip to content
Skip to navigation
You are here:
Home
Documentation
XStandard End-user Guide: Table Of Contents
Tables
Tables
Tables and Accessibility
Accessibility and layout tables
Accessibility and data tables
Create a table
Edit tables using the Table properties dialog box
Edit tables using the context menu
Column and row headers
Insert a row, or a column
Delete a row, a column, or a table
Merge cells
Split cells
Align row, column, or cell contents
Move around inside a table
Change the width of a table
Change the width of a column
Reset table properties
Insert space before a table
Insert space after a table
Tables and accessibility
The desire to make information universally accessible has generated standards and best practices that are supported at the authoring level. This ensures information in tables is as accessible as possible prior to publication.
The editor supports the creation of accessible content in four ways:
Authors are given a choice between creating layout tables or data tables.
Essential information needed to make data tables accessible is required before they can be saved.
Additional information is collected for data tables and this information is made available to screen readers.
The editor also includes a view mode called "Screen Reader Preview" that allows authors to verify (prior to publication) that content presented in tables is accessible.
Accessibility and layout tables
Layout tables are a popular method of presenting mixed content comprising text and images. However, layout tables can hinder accessibility if authors are unaware of how content in tables is processed by assistive technologies, such as screen readers.
First, layout tables typically position text in relation to images, whereas screen readers completely ignore any such visual relationships. Instead, they process information found in layout tables in strict linear fashion, from left-to-right, top-to-bottom, regardless of the type of content.
The editor's Screen Reader Preview is therefore designed to give authors a glimpse of how a given table will be processed by screen readers. This highlights any accessibility issues, and allows authors to make changes prior to publication.
For example, in the layout table below (seen in Edit mode), the author doubtless intended the text describing the Acropolis to be read in relation to the image of the Acropolis that appears beneath the text. The same is true for the pyramid.
However, despite the author's good intentions, significant accessibility problems arise when the same content is processed by a screen reader, as demonstrated by the Screen Reader Preview below:
The most striking difference between the Edit and Screen Reader views of the layout table is that the relationship between images and text has broken down. For example, the words "...such as the Acropolis seen below" are no longer followed by an image of the Acropolis.
In the same way, the words "...pyramids such as this..." are no longer followed by the image of a pyramid.
Since the author is now aware of these obstacles to comprehension, s/he can return to Edit Mode and make necessary changes before publishing.
Accessibility and data tables
Unlike layout tables, data tables typically do not contain images. Instead, cells in data tables usually contain text or numbers, whose meaning is understood by reference to column and row headers (see below).
However, if screen readers are not made aware of the presence of column and row headers, they will process information in a data table as if were in a layout table: reading from left-to-right, top-to-bottom.
Thus, a screen reader that is unaware of the column headers in the table above will generate the following meaningless output:
"Popular Summer availability Winter availability Greece Yes. Visitors are particularly drawn to sites of antiquity such as the Acropolis. Yes No Egypt Yes, an increasingly popular tourist spot, with pyramids being of special interest. Yes Yes"
To avoid this type of confusion, the editor requires authors to identify when a data table is being used, and ensures that screen readers are able to detect the presence of column and row headers in the table.
The result can be seen below, in the Screen Reader Preview of the same data table. The presence of column headers has been clearly flagged by the editor, and the screen reader can now use the headers to make sense of information found in the table:
"Country Greece Popular Yes. Visitors are particularly drawn to sits of antiquity such as the Acropolis. Summer Availability Yes Winter Availability No"...and so on.
Create a Table
On the toolbar, select
or
. Alternatively, in the context menu, select Toolbar, Buttons, then either Draw layout table, or Draw data table.
Draw the desired number of rows and columns for the table.
In the case of data tables, once the table has been drawn, the Table properties dialog box displays and accessibility information must be entered before the data table is actually created.
Edit tables using the Table properties dialog box
To open the Table properties dialog box, place the cursor inside a layout table, open the context menu, and select Table, then Properties.
The following screenshot shows the Table properties dialog box for layout tables:
The following screenshot shows the Table properties dialog box for data tables. In addition to fields found in the layout table properties dialog box, data tables include the fields Summary and Caption:
Under Rows and Columns (both required fields), input the number of rows and columns.
For data tables only, under Summary, enter a summary for the table. Summaries are required for data tables and are made available to screen readers. Summaries do not appear in Edit mode or in Browser Preview mode, but are visible in Screen Reader Preview mode.
For data tables only, under Caption, select Yes or No to indicate if the table is to have a Caption or header. Captions are made available to assistive technologies such as screen readers. They are input in Edit mode, appear immediately above the table and are center-aligned. Captions are visible in all view modes.
Under Width, input the width of the table in pixels, or as a percentage of the width of the page. In data tables, when this field is left blank, the width of the data table expands as content is entered into the table.
Under Cell Padding, enter a number representing the space you want to appear between the contents of a cell and the cell's border. One (pixel) is the default.
Under Cell Spacing, enter a number representing the space you want to appear between the cells themselves. Two (pixels) is the default.
Under Border, enter a number representing the thickness of the table gridline. The default border setting for layout tables is invisible or "0". However, for the author's convenience, a "0" border setting displays as a gray border in Edit mode. One pixel is the default setting for data tables.
Edit tables using the context menu
Column and Row Headers
In data tables, it is assumed that the top row is a row of headers. Column and row headers appear bolded.
To add/remove column headers in a data table, in the context menu, select Table, then (de-)select Column of headers or Row of headers.
Insert a row, or a column
Place the cursor in the table and, in the context menu, select Table, then choose to insert a row / column either above / below or on the left / right.
Delete a row, a column, or a table
Place the cursor inside the table and, in the context menu, select Table then choose Delete a table / row / column.
Merge cells
Select consecutive cells for merging (horizontally and vertically).
Place the cursor in the selection and, from the context menu, select Table then Merge cells.
Split cells
Place the cursor in the merged cells and, in the context menu, select Table then Split Cells.
Align Row, Column or Cell Contents
Place the cursor in the row / column / cell and, in the context menu, choose Table then Row / Column / Cell properties.
Under Align horizontal, choose, Left, Right, Center, or the Default alignment.
Under Align vertical, choose Top, Bottom, Middle, or the Default alignment.
Move around inside a table
Accessibility best practices reserve the use of the Tab key for navigating into the editor from another control in your content management system. Therefore, use the following keyboard combinations to move from one cell to the next while in the editor:
Windows and OS X:
Use
CTRL
+
UP ARROW
to go to the beginning of the current cell or preceding cell.
Use
CTRL
+
DOWN ARROW
to move to the beginning of the next cell.
Use the
UP ARROW
or
DOWN ARROW
keys to move to rows above or below.
Change the width of a table
The width of layout tables is set by default to 100% of the page width.
The width of data tables is left blank by default. If no width is specified by the content author, data tables expand gradually as data is entered into the table.
To change the width of a table:
Place the cursor in the table and, from the context menu, select Table then Table properties.
In the Table properties dialog box, under Width, set the width of the table in pixels or as a percentage of the width of the page.
OR:
Place the cursor on the vertical edges of the table until a double-headed arrow displays (see below).
Drag the table to the desired width. The new width of the table display (in pixels) as the table is being resized.
Change the width of a column
Place the cursor inside the column and, in the context menu, select Table, Column properties.
In the Column properties dialog box, under Width, enter the desired width of the column in pixels, or as a percentage.
OR:
Place the cursor along the column border until double-headed arrows display (see below).
Drag the column to the desired size. The width of the column to the left is displayed, in pixels, as the column border is dragged.
Reset table properties
Place the cursor in the table and, in the context menu, select Table then Reset table properties. Selecting this option will not remove any rows or columns added since the table was first opened, but will:
Remove all column widths
Remove any formatting applied since the table was first opened
Insert space before a table
Place the cursor in the top-left cell of the table. In data tables, place the cursor in the caption if one is present.
Use the left arrow key to move the cursor to the left until it appears as one long cursor along the vertical left edge of the table, as seen in the screenshot below. Press
ENTER
to insert a paragraph before the table.
Insert space after a table
Place the cursor in the bottom-right cell of the Layout or data table.
Use the right arrow key to move the cursor to the right until it appears as one long cursor along the vertical right edge of the table, as seen in the screenshot below. Press
ENTER
to insert a paragraph after the table.
Navigation
Home
Products
Downloads
Purchase
Documentation
Support
Contact Us
My Account / Login
XStandard works for ...
Most popular FREE downloads
XStandard WYSIWYG editor
HTTP component
ZIP component
Image size component
Base64 component