Skip to Content

Creating and Modifying Tables

Inserting a table

To create a table inside the text editor:

  1. Click the insert table button in TinyMCE button.
  2. In the popup window, type in the number of columns and rows.
  3. Type in a number for the amount of cellpadding (which represents the space around each individual cell) and cellspacing (which represents the space inside a cell around the text).
  4. Select an alignment for the table.
  5. Type in a number for the width of border. 0 means no border around the table.
  6. Type in a width and height of the table in pixels. If you don't type in numbers, the width will be maximum for the content area and the height will be the height necessary to fit all the information you type into the table.
  7. The "Class" setting does not have any options, so you can ignore this.
  8. In the "Advanced" tab, you can see settings such as:
    • Id (useful for those who are styling a site using CSS)
    • a table summary
    • style information (using CSS, but this time directly in the table HTML)
    • language direction (to account for languages that run right to left)
    • language code for the table data
    • the URL of a background image for the table
    • the border and background colors which you can select from a list.

Resizing a table

You can use the mouse to manually resize a table using the boxes on the table itself.

  1. Click on the border of the table. You should see arrows and small boxes.
  2. Click on one of the small boxes and drag the table outward or inward to how large you want it to appear.

Working With Cells (Adding or Removing Columns and Rows and Merging)

  • To remove the current row, click the delete table row button in TinyMCE button
  • To remove the current column, click the delete table column button in TinyMCE button
  • To insert a column after the current column, click the insert column after the current column button in TinyMCE button
  • To insert a column before the current column, click the insert column before the current collumn button in TinyMCE button
  • To insert a row after the current row, click the insert row after the current collumn button in TinyMCE button
  • To insert a row before the current row, click the insert row before the current collumn button in TinyMCE button
  • To merge cells, highlight the cells you want to combine, then click the merge cells in a table button. You can select cells in a column or in a row, or multiple rows and columns, and those selected cells will merge.

Properties

You can change the height, width, alignment, colors (foreground and background) of whole rows, or individual table cells by clicking on the respective properties button for each. There is no such button for entire columns.

  • Clicking the cell properties button in TinyMCE button gets you the properties for the current cell
  • Clicking the row properties button in TinyMCE button gets you the properties for the current row