HTML Editor: Creating Tables

Creating Tables
Tables are used for laying out and presenting data.

Insert Table
This button opens a pop-up screen that allows you to format the table you are inserting in the document.

  • Rows selects how many horizontal cells will be in your table.
  • Cols(Columns) selects how many vertical cells will be in your table.
  • Width select how wide the table will be in relation to your web page. The default is "100 Percent", meaning that the table will stretch across the entire web page. You can change this by altering the number in the Width box and the measurement in the drop down.
    • Pixels measure the size of the "dots" which make up the computer screen. For example screens used to be 640 pixels across. A 100 pixel table would take up over 15% of the screen (1/6th). Today's screens are often 1000-1500 pixels across. That same 100 pixel table would only take up 6-10% of the screen.
    • Ems are a general unit for measuring lengths used by professional web page designers. For most of the web pages created by teachers it is unnecessary.
  • Border Thickness determines the thickness of the line around the table.
  • Spacing is how close the cells are to one another
  • Padding is how much space is in between the cells

When each cell of the table are two sets of controls with three small buttons. Above the cell, the left and right arrows insert a new column before or after the existing column. The circled "X" button will delete the entire column. On the side of the cell the up and down arrows insert a new row before or after the existing column. The circled "X" button will delete the entire row.

Additional Table Commands
These are found when you click on the "Enlarge Editor" button.

Row Properties
You can align text vertically or horizontally within the cells. Clicking on the "Background" "FG (Fore Ground) Color" and "Border" will allow you to change the color of these.

Insert/Delete Row/Column
These function just like the arrow and circled "X" controls within the table.