Have you ever wanted to line up information in columns on your webpage? That tab key just doesn't work the same as it does with your word processor does it? To set up columns of text, or even columns of graphics, use a table. This help doc will even show you how to make the lines of the table disappear leaving only those beautiful columns. Read on for some helpful tips on tables.
A plain 'ol table...
The table above is a very simple table that contains hyperlilnked text. This is an excellent way to organize multiple links and get them spread across the page instead of one long column. The next steps describe how to create this on a webpage.
Add a Text/Graphic Editor
Tables can be added to a page within a Text/Graphic Editor. You can add tables on the right side of a webpage, but to be able to see everything clearly, we will add it to the Main Body of this page. Choose the T/G Editor from the first dropdown menu, and where you would like it to go in relation to the other tools on the page in the second dropdown menu. Click Add.
Set up the table properties
Rows are horizontal and columns are vertical. Enter the number you wish into the box. Don't worry if you need to add or remove some later, we can do that.
Header options include None, First Column, First Row, or Both. Cells in the header are centered and bold. I rarely use this...
Border size describes the thickness of the surrounding edge of the table. (Spoiler alert: This is where you will go to make the gridlines invisible.)
Alignment describes the alignment of table on the page. Your choices are left, center, and right.
Width can be expressed in pixels or percentage. Be careful if you choose pixels that you don't exceed the width of the area. Otherwise your page will look very funky.
Height is simply how high or tall you want the table to be. Again, your choices are pixels or percentages. Pixels are a specific measurement while percentages will vary depending on other items on the page. If you leave this blank, the table will use the defaults which is usually fine.
Cell spacing controls the space between table cells.
Cell padding sets the amount of space between the contents of the cell and the cell wall.
Table with Default Settings
The table displayed above contains 3 rows and 2 columns. It's a good place to start for us. As text is entered into a cell, the width of the cell adjusts to accommodate the size of the text. To move from cell to cell, use your Tab key.
To format text, including hyperlilnks, simply highlight it and use the buttons in the toolbox at the top, just like you would for any text.
The Power of a Right Click
Right clicking within a table brings you many options:
- Delete Table
- Table Properties
Let's take a look at a few individually.
Cell options are displayed above. Some are grayed-out. Cells must be highlighted before these options become available. For example, if you wish to Merge Cells, two or more cells must be highlighted first.
Rows and columns have additional choices too. They include Insert Before, Insert After, and Delete.
Delete Table is also available from this dropdown menu.
Color adds much to a table. Within Cell Properties, you have the ability to add background and border color as well as many other options. Check them out and have some fun!
Table Properties revisited
Table Properties can be changed after the table has been created by using a Right click and choosing Table Properties from the menu.
The above window displays. It should look familiar as it is the same window as when the table was originally set up.
Making the 'Table' Invisible
Sometimes a table looks better without the gridlines. (Not the one shown above necessarily, but you know what I mean!) Then your text just looks like it's set up in columns. Here are the steps to make that happen:
- Click anywhere within the table.
- Right click and choose Table Properties from the menu options.
- Set the Border Size field to 0.
- Click OK.
Tables in the digital world are very versatile. Once you get to know them, most digital environments offer the same options. Have fun exploring!