How to Add a Table Using OzSpeed hPanel

Tables are useful for displaying data, pricing information, product comparisons, schedules, or any structured content in an organized format. With OzSpeed’s Website Builder, you can easily create a table using the built-in tools or embed custom HTML code for more advanced tables. Here’s a step-by-step guide on how to add and customize tables on your website.

---

Step 1: Access the Website Editor #

To start creating a table, open the page editor in hPanel.

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Builder > Edit Site.
3. Navigate to the page where you want to add the table, such as a Pricing, Comparison, or Schedule page.

Tip: #

• Place the table in a section where structured data can help users easily compare information or find key details.

---

Step 2: Add a Table Using the Text Block #

You can create a simple table using the Text Block with the built-in table tool.

How to Create a Table: #

1. Click Add Element and select Text Block from the list of elements.
2. Drag the Text Block to the desired location on your page.
3. Click inside the text editor to activate the toolbar.
4. Click the Table Icon (grid icon) on the toolbar.
5. Select the number of rows and columns you want for your table (e.g., 3 rows and 4 columns).

Tip: #

• Start with a simple layout and add more rows or columns as needed.

---

Step 3: Enter and Format Table Content #

You can now add text and format the content within the table.

How to Edit Table Content: #

1. Click on a cell to enter text (e.g., product names, prices, features).
2. Use the text formatting options (bold, italic, alignment) from the toolbar to style the content.
3. Click outside the table to save the changes.

Formatting Options: #

• Bold Text: Highlight headers or important information.
• Center Align: Align numbers or data points for better readability.
• Merge Cells: Right-click a cell and choose Merge Cells for combining multiple cells.

Tip: #

• Use the top row for headers (e.g., “Product,” “Price,” “Features”) and bold the text for clarity.

---

Step 4: Customize the Table Design #

You can adjust the appearance of the table to match your website’s style.

How to Style the Table: #

1. Click on the table to open the Table Settings.
2. Customize the border color, background color, and text color.
3. Adjust the cell padding and cell spacing for better readability.
4. Click Save after making changes.

Tip: #

• Use alternating row colors (e.g., light gray and white) for a clean, easy-to-read design.

---

Step 5: Embed an Advanced Table (Optional) #

For more complex tables, you can use custom HTML code.

How to Embed an HTML Table: #

1. Click Add Element and select HTML Block.
2. Drag the HTML Block to the desired location on your page.
3. Paste the following example HTML code:htmlCopy code<table style="width: 100%; border-collapse: collapse;"> <tr> <th style="border: 1px solid #ddd; padding: 8px;">Product</th> <th style="border: 1px solid #ddd; padding: 8px;">Price</th> <th style="border: 1px solid #ddd; padding: 8px;">Features</th> </tr> <tr> <td style="border: 1px solid #ddd; padding: 8px;">Product A</td> <td style="border: 1px solid #ddd; padding: 8px;">$29</td> <td style="border: 1px solid #ddd; padding: 8px;">Feature 1, Feature 2</td> </tr> <tr> <td style="border: 1px solid #ddd; padding: 8px;">Product B</td> <td style="border: 1px solid #ddd; padding: 8px;">$49</td> <td style="border: 1px solid #ddd; padding: 8px;">Feature 3, Feature 4</td> </tr> </table>
4. Click Apply to save the changes.

Tip: #

• Customize the HTML code for specific styling or to add more rows and columns as needed.

---

Step 6: Preview and Test the Table #

Before publishing, preview the page to ensure the table looks good and displays correctly.

How to Preview: #

1. Click Preview in the top toolbar.
2. Check the table on both desktop and mobile views.
3. Ensure that all data is visible and the table is easy to read.

Tip: #

• Use an incognito window or clear your browser cache to see the changes as a new visitor would.

---

Step 7: Publish the Changes #

Once you’re satisfied with the table’s design and content, publish your updates to make it live.

How to Publish: #

1. Click Publish in the top right corner of the editor.
2. Confirm the changes to go live.

Tip: #

• Share the page link with your audience or team to get feedback on the new table.

---

Troubleshooting Tips #

1. Table Not Displaying Correctly:
   • Ensure all HTML tags are correctly formatted if using custom code.
   • Clear your website cache in hPanel and your browser cache.
2. Table Layout Issues on Mobile:
   • Use responsive design settings to adjust the table size for smaller screens.
   • Test the table on multiple devices to ensure it displays correctly.
3. Content Overflows the Table Cells:
   • Increase the cell padding or adjust the column width for better spacing.
   • Shorten the text or use abbreviations if necessary.

---

Additional Tips: #

• Keep Tables Simple: Avoid using too many columns, as it can make the table difficult to read, especially on mobile devices.
• Use Tables for Comparisons: Display product features, pricing plans, or event schedules in a clear, side-by-side format.
• Optimize for SEO: Include relevant keywords in table headers and descriptions to help search engines index your content.