User Documentation
Download
Launch

3.5 Tables

Using the text editing tools in Joomla, learn how to create and format a table in an article. In this final tutorial of the section, we'll complete the Our Services article by adding a plans-and-pricing table.

Prerequisites

  • 1 Tutorial Introduction covers where to run your tutorial and administrative access.
  • 3.4 Links adds the Joomla hyperlink this tutorial's starting point builds on.

Steps

  1. Log in to Joomla backend and navigate to the Home Dashboard.
  2. In the Administrator Menu, click Content > Articles.
  3. Click Our Services to reopen it for editing.
  4. Click at the end of the article's last line, then press Return to start a new line.
  5. As demonstrated in 3.2 Headings, set the format to Heading 2 and type Plans & Pricing.
  6. Press Return, set the format to Paragraph, and type: Choose the plan that fits where you are today — you can always move up as you grow.
  7. Press Return to start a new line for the table.
  8. Expand the toolbar by clicking the ellipsis icon.
    • The toolbar adapts to the browser width. The configuration and position of icons may be different than shown here.
  9. The table icon is a dropdown menu. Expand the menu and hover over the first option, Table. Result: A grid pops up to the right.
  10. Hover over the grid to select a 4-column, 4-row table, then click to insert it.
    Table menu open with the size-picker grid showing a 4 by 4 selection highlighted
    Selecting a 4-column, 4-row table from the size-picker grid
  11. Fill in the table, pressing Tab to advance from cell to cell:
    • Row 1 (header): Feature, Basic, Standard, Premium
    • Row 2: Consulting hours, 5/mo, 15/mo, Unlimited
    • Row 3: Implementation support, Email only, Email + calls, Dedicated manager
    • Row 4: Support response time, 2 business days, 1 business day, Same Day
  12. When the cursor is in any cell, a contextual menu appears above the table.
    • Here you can add or delete rows or columns.
    • Hover over the icons to reveal their function.

    Filled-in table with no borders yet applied, contextual table toolbar visible above it
    The filled-in table, unformatted, with the contextual toolbar above it
  13. Adjust the column and table width.
    • Hover over the border line dividing two columns and note the cursor changes.
    • Click and drag the border left or right to change the width of a column.
    • Dragging the far right border adjusts the width of the table.
  14. Save and preview your article by clicking the Save button followed by the Preview button. Result: A popup frame of your article appears.
    • Scroll down to examine the table.
    • Note there are no borders between the table cells.
    • Close the preview window.
  15. Add cell borders.
    • Click into the top-left cell and drag down and to the right to highlight all the cells in the table.
    • Right-click any highlighted cell, hover over Cell, then click Cell properties. Result: The Cell Properties window opens.
      Right-click menu over the highlighted table with Cell submenu open, Cell properties highlighted
      Reaching Cell properties from the right-click menu
    • Click Advanced. Set Border width to 1px and Border style to Solid.
      Cell Properties window, Advanced tab, Border width set to 1px and Border style set to Solid
      Setting a 1px solid border on the Advanced tab
    • Save and close the form.
    • Save the article and preview. Result: All the cells are formatted the same. Next we'll format the table heading.
    • Close the preview window.
  16. Set the table header row.
    • Highlight the top row of the table by clicking into the top-left cell and dragging to the right while holding down the mouse button.
    • Right-click any of the highlighted cells, hover over Cell, then click Cell properties.
    • Under Cell type choose Header cell.
    • Under Horizontal align choose Center, then save. Result: The header cell contents are centered and formatted with bold text.
      Cell Properties window, General tab, Cell type set to Header cell and Horizontal align set to Center
      Setting the top row's cells to Header cell, centered
    • Save the article and preview. Result: The cell content is tight against the cell borders.
    • Close the preview window.
  17. Adjust the cell padding.
    • Right-click anywhere in the table and select Table properties.
    • Enter 5px under Cell padding.
    • Save the article and preview. Result: The table is fully formatted — bordered, with a centered bold header row and comfortable cell padding.
      Final formatted table in Preview, with borders, a bold centered header row, and cell padding applied
      The finished Plans & Pricing table

Click Save & Close. Result: Our Services is now complete — an opening paragraph with bold and italic emphasis, three headed service sections, a bulleted and a nested numbered list, a hyperlink to the Joomla project, and a formatted pricing table. If you'd like to publish it, 2.1 Article & Menu Item covers adding a menu link so visitors can find it.

Concepts

Setting header cells is an important semantic and accessibility issue; see Creating Accessible Tables for more.

Browsers will adjust table and cell widths differently depending on browser width and window size.

Tables are intended for displaying tabular data. At one time it was popular to use tables for layout to position content on a page. They should never be used for this purpose.