Tables
Tables are a grid of information available within a web page. Similar to a spreadsheet, Tables are comprised of columns and rows. SharePoint provides a means to insert content via table within the Content Editor Web Part.
Please note: website visitors increasingly use mobile devices such as smart phones and tablets to access Commonwealth agency websites. These mobile devices have smaller screens to which websites must adjust. Websites that detect and adjust the arrangement of their content to fit mobile devices are known as "responsive".
Tables may interfere with a website's ability to adapt to the smaller screens found on mobile devices. Thus, a website visitor viewing a page with a large table may not have an optimal experience and may need to "zoom in" to view the table. Thus, smaller tables are best when including as part of a web page. Larger tables are often best accommodated as PDF files to be downloaded and viewed outside a web browser.
See the Lists and Tables Worksheet (PDF) to determine what should be used.
Add a Table
Tables can be added to the Content Editor Web Part in the following manner:
- While editing a page, click the
Insert tab on the ribbon.
- Click the
Table icon.
- An
Insert Table menu appears. Hover over the table to determine the number of
rows and
columns to be inserted.
- A blank table with the indicated number of
rows and
columns will be inserted. Between each row and column is an area known as a
cell. Click in each cell to manually enter the required information.
- Once a table has been inserted, the
Table Layout and
Design tabs will appear on the ribbon.
Change Table Properties
The
Table
Layout and
Design tabs will allow you to change properties of the table. These features are similar to those found in Microsoft Office applications, such as Excel. A few of the more commonly used properties are described below:
Table Layout
Merge Cells: create 1 cell from 2 or more cells in the table. Various options are available via pulldown menu.
Split cells: create 2 or more cells from 1 cell in the table. Various options are available via pulldown menu.
Insert Above, Below, Left, Right: add a new cell above, below, to the left, or to the right of the currently selected cell
Delete: remove a selected part of the table (or entire table itself). Various options are available via pulldown menu.
Width / Height of Table, Column, Row: adjust the size of the entire table, columns within a table, or rows within a table.
Table Design
Header Row, Footer Row, First Column, Last Column: checking these options will display special styling for the indicated areas.
Styles: a pulldown menu will provide table-wide styling options, such as alternating grey and white banding or cell border colors.
Show Grid Lines: checking this option will indicate the borders between cells within the table.
PAI Mobile Design Style
If you would like to use the PAI Mobile Design style (which will look like the below table --view in mobile or size down) follow the steps:
- Create your table with the SharePoint Tools, as above
- Make sure the Header Row is checkmarked under Table Design
- In the Styles dropdown select the "NIC PA Table Style-Responsive"
Bear
| Brown
| Omnivore
| 4
| Salmon
|
Snake
| Red
| Carnivore
| 0
| Small rodents
|
Rabbit
| White
| Herbivore
| 4
| Carrots
|