Tech | Web Team

Creating Tables

Creating tables for your page can help users process large amounts of information in a limited space.
  • Tables are for tabular data not pictures and paragraphs.
  • Familiarize yourself with the Table Wizard.
  • Do not cut and paste tables from external applications.
  • Only use tables if you need to.
  • Tables should not be used as a design element.
  • Try different ways of constructing your table, the more you play around with the Table Wizard the better your tables get.

Walk Through and Jump to Points in Video

  • Lock your page.
  • Open the text editor and here we go!

Simple Table

  • In the text field use your cursor to click where you want your table to go.
  • At the top of the text editor pop up window you will see the tables icon.
  • Click on this and you will see a pull down list with a grid at the top.

Table Tool

  • You can highlight the blocks in the grid to define the size of your table.
  • Your table will appear on your page and you can add the tabular information into the cells.

Advanced Table

  • If you would like a table larger than 6 by 6 cells you can use the Table Wizard.
  • You will see the table wizard option in the pull down list below the grid.
  • Click Table Wizard and a pop up window will appear.

Table Wizard

  • As you can see you have another grid.
  • But pay close attention to the plus and minus signs on this grid.
  • These allow you to add or subtract rows and columns.
  • You can also change the format of the cells by using Column Span and Row Span
  • Feel free to experiment with the table wizard to find the right size and shape you think is best for your page.

Complicated Table

  • Within in the pop up window for the table wizard you will also see the tabs Table PropertiesCell Properties and Accessibility.
  • These tabs allow for much more complicated table builds.
  • Table Properties will allow you to adjust the height and width of the table, align your text, add padding, and apply CSS classes within the table.

Table Properties

  • Cell Properties will allow you to adjust the size of the actual cells.

Cell Properties

  • You can make them rigid by choosing a specific number of pixels or you can make them adjust to the page by choosing percentage.

Accessibility Options

  • Accessibility allows you to add a caption and a summary for your table.

Accessibility

  • The caption will appear above your table in your build and the summary will make it so that visually impaired users can have an overall summary of your table.
  • Accessibility also allows you to add a header row and a header column.
  • By entering the value of 1 in each of these fields it will make the cells at the top of your table or to the side of your table the title for that row or column.
  • Entering anything more than a value of 1 in the column header field or the row header field will make it look muddled and confusing.
  • Keep it simple.
  • To see this working, enter in a 1 in the filed next to Header Column, then check "Associate cells with headers."
  • Then press OK.
  • Now you will be back to the Text Editor.
  • Go to your table and enter in the column headers into the gray boxes at the top of your table.
  • Doing this makes your table look well organized.

Entering Text and Content

  • Click on the individual cells to add content directly.
  • You can type your content into the individual cells and add links if you so choose, but don't cut and paste.

Finished Table

  • Creating tables takes some time, try out all your options and you will soon become your own Table Wizard.

Puppy table

FAQ

How big can I make my table? Confused Kitten

Well, how big do you really need to make your table? Keep in mind users can only take in so much information. Be concise about your tables along with the rest of our content.

Why does my table keep doing this weird spacing thing while I write in it?

Don't worry it just does that as the cells are not a fixed size. When you complete your table you will see that it all evened out.

My tables look uneven, how do I make them all lineup?

By right clicking on your table you can see a list of options pop up. Select cell properties and enter in the proper percentage in the width field. If you have 4 columns 25%, 2 columns 50%, other amounts of columns, do the math.

Best Practices

  • Feel free to build as many tables as you like and explore the options the Table Wizard gives you, it is the only way to learn.Winning Guinea Pig
  • Once you have decided on your table‚Äôs dimensions, entering information into the cells is quite simple. Just click in the cell where you would like your content to go and type away.
  • Don't press enter or return when putting content in a table...it will cause a large space and can only be fixed in the coding
  • Only create a table if it is the most efficient way for a user to process the information.
  • Use tabular data. Do not use document or image files in your table.
  • Check your work. Make sure the table looks good in the preview.
  • Keep it simple and concise; large clumps of text can be difficult to read.
  • Tables are for information, they should not be used as a design tool.

Page last updated: 7/9/2014