Ask a Question ?
Design & Publish Websites Faster

How to Build a Valid HTML Table

Update: We have a brand new Table app, feel free to use it.

One of the most common custom code you’ll want to include in an Embed HTML app, besides third party integrations from other services around the web, is an HTML table.

In this article, we’ll explain how to build one that passes our program validation test.

About the Validator

There’s a comprehensive article on Our editor’s validator. Be sure to check it out!

What the validator basically does is prevent the code you enter from being saved if errors are found.

This can save you a lot of troubles, since invalid code can break your site.

Valid Table

An HTML-valid table is not hard to achieve. You only need to follow the standard rules of HTML syntax and hierarchy, and you’ll be good to go.

The following is an example of a basic table in HTML:

Valid HTML Table code sample

Valid HTML Table code sample

(code)

<table>

<tr>
<td>This is a Cell</td>
<td>This is another Cell</td>
</tr>

<tr>
<td>This is a Cell</td>
<td>This is another Cell</td>
</tr>

</table>

This is what it would look in a browser:

Rendered table in a browser

Rendered table in a browser

In the example above we used the most simple way of doing it, without any formatting. If you’d like to add borders, padding and other formatting, you can also include a CSS bit on top of it.

Take a look at the following sample:

In this sample, CSS has been added to the code

In this sample, CSS has been added to the code

(code)

<style>
.my-table        {border-collapse:collapse; border:1px solid black;padding:0; border-spacing:0; margin:0; }
.my-table td    {border:1px solid black; margin:0; padding:6px; border-collapse:collapse;}
</style>

<table class=”my-table”>

<tr>
<td>This is a Cell</td>
<td>This is another Cell</td>
</tr>

<tr>
<td>This is a Cell</td>
<td>This is another Cell</td>
</tr>

</table>

This will generate a table like the following:

This is how it would look in a browser

This is how it would look in a browser

You can of course include other CSS rules and heading columns like <th>.

Online Tools

In case you don’t want to manually code a table, you can try out one of the many available services that do this for you.

If you do a quick search for “HTML table generator” you’ll find plenty of results.

Here’s one you may want to try:

http://www.quackit.com/html/html_table_generator.cfm

Just enter your settings, and click on the “Generate Table” to get a preview of how it will look rendered and the code below that you can copy and paste in your site.

Use this online, free service to generate valid HTML table code

Use this online, free service to generate valid HTML table code

The End

That’s it folks! Let us know if we missed something.

Menu