Knowledgebase

EverWeb has no Insert Table tool. The best way to add a table is to paste a short piece of table code into an HTML Snippet widget: the text stays real text that search engines and screen readers can read, and you change it by editing the words. You can also show a Google Sheet, line things up with a Container, or, as a last resort, use a picture.

Which option to use

Add a table with the HTML Snippet widget

1. Open the page, click the Widgets tab and drag HTML Snippet onto the page.
2. Go to Inspector > Widget Settings, paste the code below into the HTML Code box and click Apply.
3. Leave Embed Option on Auto, or choose Direct Embed. Don't choose External Frame: search engines may not read what's inside it.
4. Tick Adjust height to content so the box grows to fit the table.
5. On a Responsive page, put the widget inside a Container, or tick Full width in Inspector > Metrics, so it fits the screen.
6. Click Preview to check it, then publish.

Here's a price list you can copy. Change the words and prices to your own:

<div class="ew-table">
<table>
  <caption>Prices</caption>
  <thead>
    <tr><th>Service</th><th>Time</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Haircut</td><td>30 minutes</td><td>$35</td></tr>
    <tr><td>Cut and colour</td><td>90 minutes</td><td>$95</td></tr>
    <tr><td>Children's cut</td><td>20 minutes</td><td>$20</td></tr>
  </tbody>
</table>
</div>
<style>
.ew-table { overflow-x: auto; }
.ew-table table { width: 100%; border-collapse: collapse; font-size: 16px; }
.ew-table caption { text-align: left; font-weight: bold; padding: 8px 0; }
.ew-table th, .ew-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #dddddd; }
.ew-table thead th { background: #f2f2f2; }
.ew-table tbody tr:nth-child(even) { background: #fafafa; }
</style>

How to change it:

• Add a row: copy one whole line that starts with <tr> and ends with </tr>, paste it below, and change the words.
• Add a column: add one more <th>...</th> to the heading row and one more <td>...</td> to every other row.
• Change the title: edit the text in <caption>, or delete that line if you don't want a title.
• Colours: change #f2f2f2 (heading row) and #fafafa (every second row) to your own colours.

Wide tables on phones

The overflow-x: auto line lets a wide table scroll sideways inside its box on a phone, instead of squeezing every column. For a table with many columns, add min-width: 700px; to the .ew-table table line so the columns stay readable and visitors swipe across. Keep tables for phones to about four short columns where you can.

Already have the table in Excel, Numbers or Google Sheets? An online "HTML table generator" can turn a pasted spreadsheet into table code. Paste only the <table> part into the snippet.

Show a Google Sheet

Good for a fixture list or timetable that changes every week: changes in the sheet show on your website after a short while, without publishing again.

1. In Google Sheets, choose File > Share > Publish to web, click the Embed tab, pick the sheet and click Publish.
2. Copy the code it gives you (it starts with <iframe).
3. Paste it into an HTML Snippet as above. In the code, change width="..." to width="100%" so it fits a phone.

Anyone can see a published sheet, so don't put private details in it. Search engines may not count the sheet as part of your page.

Line things up with a Container Row

For a few columns of text without grid lines, such as an address on the left and opening times on the right, click Containers in the toolbar, choose Container Row and drag a Text Box into each column. In Widget Settings > Display, set Wrap to Wrap so the columns stack on a phone. Because each column stacks as a whole, this doesn't suit data that must stay lined up in rows. See Build a responsive page with Containers so it stacks neatly on a phone.

A picture of a table (last resort)

You can make the table in Pages, Word or Excel, save it as a picture and add it to the page. It's quick, but search engines and screen readers can't read the words, the text gets tiny on a phone, and every change means making a new picture. If you do this, describe the table in the picture's alt text, and link to a PDF copy that visitors can zoom and print: see How do I link to a PDF so visitors can open or download it?

Third-party developers also make table widgets for EverWeb, such as data tables, price tables and searchable tables. You'll find them on the EverWeb add-ons page. To install one, see Install and use third-party widgets in EverWeb. The widget's maker supports it.

Related articles

• Add a booking calendar, Instagram feed or other outside code with the HTML Snippet widget
• Build a responsive page with Containers so it stacks neatly on a phone
• Make your website accessible: alt text, headings, link text and contrast
• Add an FAQ with questions that open and close (accordion)
• Install and use third-party widgets in EverWeb