Tip of the Week #20: All About Tables

24 May

totw-banner.jpg

So last time, we went over everything that went into creating a table of contents for your page quickly and effectively using the Point-and-Click Editor. Today, we follow in the same vein, but advanced users can skip down to the bottom and read about some of the ways to style your tables using CSS, in case you would like to do something like get rid of the borders, change the colors, etc.

Before we get into all that however, we first need to make the table itself. Read on ahead to find out how to make a table using the Point-and-Click Editor and other options to modify an existing table, such as adding rows and columns, removing rows and columns, merging cells, etc.

Creating a new table

First, you just click on the little table icon in the editing toolbar:

Table step 1, clicking on icon

You’ll be taken to a settings menu that looks like this:

Table settings

Here, I’ve changed the settings to create a 3×3 table (3 rows and 3 columns). I confirm the table, and it will show up in the editor. I’ve taken the liberty to fill that table with values below:

table03.gif

So I now have a rudimentary multiplication table. A question people ask a lot is: “How do I insert rows or columns?” If you right-click on the table, you will get a menu:

context menu

This menu has sub-menus allowing you to do things like insert columns, delete columns, merge cells, etc. Basically, you can do anything you do with a table in your favorite word processing application. Note that the Insert functions for rows and columns insert after the current position. In this case, I right-clicked on the last column and inserted a new column.

If I did that, and then inserted a new row the same way, filling it up with values when I was done, I might have something like this:

table05.gif

And that’s that.

But now, what if you don’t like the way the table looks? CSS can be helpful here…

Styles for PBwiki tables

In the settings, you probably noticed that you could set cell-spacing, cell-padding, and border for your table. Cell-spacing is the amount of space in between individual cells, in pixels. Cell-padding is the amount of space (the padding) between the edge of a cell and the content inside of it, also in pixels. Border refers to the width of the outline of cells and also the table itself. Play around to see what you can do.

These options maybe be enough for some people, but those folks who like to micromanage (or are really prissy) will find that they don’t give you the control you need. For you, I suggest not trying to define your tables this way (which is really a relic of old HTML formatting) and doing them with CSS.

First, clear out all of the settings for your table by setting cell spacing, cell padding, and border to 0 (zero). Then, if you want to just do some settings for the tables on this page, click “Insert Plugin” –> “PBwiki Magic” –> “HTML.” Insert the following code:

<style>
#displaycontent table td{
border: 1px solid #00ff00;
padding: 2px;
background: #000000;
color: #ff0000;
}
#displaycontent table {
border-collapse: collapse;
}
</style>

You won’t see any changes in the preview window, but once you save, it should have one of those hacker-type inverse color schemes:

table06.gif

Now that’s not the most attractive thing ever, but I was pressed for time. You’ll probably be able to do a better job once you pick colors that don’t clash.

You can play around with the CSS, although if you don’t understand it, you may want to wait for the next article in which I discuss CSS from the ground up.

Remember that if you want this to be a permanent part of your theme (rather than just something for this page), you’ll want to upgrade to get CSS support and insert the code above (without the <style> and </style> tags) into the wiki.css file.

Conclusion

The purpose here was to focus on creating tables, although we briefly looked at using CSS to style tables. Next time, I’ll take a more in-depth view of the basics of CSS for all you aspiring designers and hackers.

Until then, e-mail me at jason.nguyen@pbworks.com with comments, suggestions, or questions. Thanks!

See the rest of my tips here.

-Jason Nguyen

2 Responses to “Tip of the Week #20: All About Tables”

  1. Gladys May 26, 2007 at 3:23 pm #

    Looking forward to your next entry!
    Thanks for the work you’re doing, Jason!

  2. Andreas November 2, 2007 at 5:58 am #

    Hi,
    “If you right-click on the table, you will get a menu:”

    when I try to edit a table by right clicking on it, the standard browser menu pops up (with back, cut, copy, paste etc in it), not the table editing menu you show in your screenshot.
    What can I do??

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 90 other followers

%d bloggers like this: