TYPO3

Table element

Use the Table content element to display data in a structured manner across multiple columns and rows.

This element is particularly suitable for clearly presenting information such as timetables. You can customize the layout using various design and separation options.

 

To the design variants for Table

Note on digital accessibility

Tables are often only of limited use for screen readers and mobile displays. Check whether the information can alternatively be presented in text form, as a list, or in another accessible format.

Only use tables if you want to present data in rows and columns — not to design the layout of a page.

Insert table

Open the page you want to edit in the TYPO3 backend. Click on Create new content at the desired location.

  1. Select the category Typical page content in the left column.
  2. The content element Table will now appear in the right column, which you can select.
  1. General tab: Here you define the basic text and content for the element.
    1. Header: Enter a short, descriptive header. It helps visitors grasp the content more quickly. In the Type field, you can also specify the header hierarchy (e.g., H2, H3). Select Hidden to display the header only in the backend. This helps you locate the content element in the backend. Website visitors will not see a hidden header.
  1. Table content: Click on the plus sign. In the pop-up window that appears, enter the desired number of columns and rows and click on Update. Now enter the content in the fields provided. Use the buttons to manage rows and columns:
    1. Arrows: Move rows up or down, columns left or right.
    2. Plus sign: Add a new row or column.
    3. Trash can: Delete row or column.
    4. Code symbol </>: Display and edit content in the source code.
       
  2. Field delimiter: Select how the content should be separated:
    1. Pipe (|) (Classic vertical lines)
    2. Semicolon (;)
    3. Comma (,)
    4. Colon (:)
    5. Tab (wide space separator)
       
  3. Text enclosure: You can also specify that the text within the tables should generally be enclosed in quotation marks.
     
  4. Table caption (optional): Enter a table caption to explain the table in more detail.
     

Save: Scroll up and click Save.

Add a table header

Go to the Appearance tab and, under Table header position, select the position of the table header. Table headers are essential for digital accessibility, as they help screen reader users to correctly understand the structure and content of the table.

  • No header: The table has no header section; all cells are treated equally. (Not recommended)
  • Top: The first row is used as the table header.
  • Left: The first column is used as the table header.

Define appearance

  1. Appearance tab: Here you can specify how the Gallery & Slider content element is displayed.
  2. Alternative background: Activate the slider to give the content element a light gray background.
  3. Table layout: Select how the table should be structured and displayed:
    1. Columns: Determines the automatic or manual number of columns.
    2. Table style: Define the design of the table:
      • Default for a display without highlighting.
      • Striped for alternating colored rows.
      • Bordered for a visible border.
    3. Table header position:
      • No header: The table has no header area; all cells are treated equally.
      • Top: The first row is used as the table header.
      • Left: The first column is used as the table header.
    4. Use table footer: Use the slider if you want to display totals or finals.
  4. Show in Section Menus: If you create a table of contents on the page, the header of the content element appears as a link.
  5. Append with Link to Top of Page: Inserts a “Top” link at the end of the element.

Set publication

  1. Access tab: Here you can control the visibility of the content element on the website.
  2. Visibility: Activate the slider to show or hide the content element on the website.
  3. Publish date: Specify when the content element should be published automatically.
    This is helpful if you want the publication to take place while you are away.
  4. Expiration date: Enter a date from which the content element will no longer be displayed.
  5. Usergroup Access Rights: Determine whether the content element is only visible to registered users.

Do you have any questions?

Do you have questions or comments about the TYPO3 instructions?

To top