Build beautiful and customizable HTML tables without writing a single line of code
Start now, it's free
Publish quickly
With TableBuilder, you can go from data to a HTML table suitable for any website in a matter of seconds. Easily adjust settings and styles to fit your every need.
About TableBuilder
TableBuilder, an open-source jQuery plugin tool, allows users of any level to create beautiful searchable, sortable and responsive HTML tables. All you need is a Google Spreadsheet or Microsoft Excel CSV file to get started. From there, customize over thirty options to make your table display your data the best possible way. Add custom styles to integrate perfectly in any website. Best part is, you can do all this without knowing how to write a single line of code!
Easy to use editor makes it simple to change options
Customize every color and style
Works in all modern browsers
Fully responsive design, optimized for mobile websites
Come back and change options anytime
Start building a table
Try out a demo
Getting Started
Create a new table using either a Google Spreadsheet or a CSV file. If you already used TableBuilder to create a table, use the "TableBuilder_config" file to make updates or use as a template base
Input your data
Paste your published Google Spreadsheet URL below or click a tab to use a different option to get started. Need Help? Check out the wiki for detailed instructions.
Google Spreadsheet
CSV File
Update existing table
Create Table
Have a CSV file? Upload it here
Drag and drop your CSV file here, or choose your file
Just one question before we get started. Do you want to use your existing data?
Yes, Use my existing data
No, I want to change my data
Create Table
Text
Structure
Header
Interactive
Formatting
Save
Text
Structure
Header
Buttons
Rows
Save
Title/Source
Insert title
Insert text block
Insert data source
Insert source link
Insert table credit
Table Structure
Responsive layout
Yes
No
Searchable
Yes
No
Search field text
Search button text
Visible rows options
Header Options
Fixed header
Yes
No
Repeat header row
Yes
No
Repeat header row
Sortable columns
Yes
No
Column Width
0% (Hidden)
100%
Data Formatting
Format all numbers
Yes
No
Format columns
Zero out decimals
Yes
No
Decimal places
Display blank data
Date format
Time format
Column Data Types
Adjust data type
Interactive Options
Visible rows
Sorted Column
Default Sort order
Asc
Desc
Index column
Yes
No
Refresh Data
Save Table
Download
Embed Code
Table Fonts
Select text option
Global
Links
Title
Copyblock
Source
Font family
Font Size
Font Color
Link Font family
Link Font Color
Link Font Hover Color
Title Font family
Title Font Size
Font Color
Copyblock Font family
Copyblock Font Size
Copyblock Font Color
Source Font family
Source Font Size
Source Font Color
Search Bar
Search bar font family
Search bar font sizen
Search bar font color
Search bar background color
Table Columns
Header font family
Header font size
Header font color
header arrow color
Header background color
header border color
Header border width
Table Rows
Row font family
Row font size
Even row font color
Even row background color
Even row border color
Odd row font color
Odd row background color
Table Buttons
Button font family
Button font size
Button font color
Button background color
Button background hover color
Button background inactive color
Save Table
Download
Embed Code
Embed Code
JavaScript
Custom Styles
Preparing download...
F.A.Q.
Find the answers to some of the frequenty asked questions about TableBuilder. Need more help? Check out the full wiki
What browsers does TableBuilder support?
TableBuilder supports all modern browsers. That includes Chrome, Firefox, Safari, Opera and Internet Explorer 9+. (TableBuilder will work on IE8 if you include respond.js on your site and put all the CSS inside the < head > tags above the respond.js script. For more information please see here)
Will this work on a responsive site?
Yes, TableBuilder is designed to work on all responsive websites. The table optimizes the display to fit smaller screen sizes. Alternatively, you can set the table not to be responsive in the "Table Structure" options and the display won't change with the the browser regardless of screen size.
Where can I use TableBuilder? Is it free?
TableBuilder, licensed under an MIT License, is a free and open source project. So feel free to use it anywhere you want.
What kind of data can I use?
You can use either a Google Spreadsheet or a CSV file. The Google Spreadsheet is the preferred data source because any updates you make on the spreadsheet will be automatically updated in the table. Just make sure you have published the spreadsheet to the web, for more information, please see the wiki.
The table doesn't work on my website
TableBuilder is dependent on jQuery, so make sure your website has jQuery loaded. This is not included in the "Embed Code" to avoid duplication, because most websites already have jQuery available. For more detailed help, please see the wiki.
My Google Spreadsheet doesn't work
Make sure you use the link provided after clicking the "Publish to the web" button in the "File" menu on your spreadsheet and not the URL in the browser. For more detailed instructions, please see the wiki.
Why are there no spaces in the column names?
If you are using a Google Spreadsheet, you will notice that spaces are removed from the column names. Unfortunately, Google removes them, so if you want your column names to have a space, replace each space in the column name with two dashes ('--') and TableBuilder will format the names appropriately. For example, the column "First Name" should be "First--Name" in your spreadsheet. For more detailed instructions, please see the wiki.
Can I change the styles?
Of course, you can change any number of styles using the Theme Roller. Or if you know CSS, simply write your own styles to overwrite the default TableBuilder styles.
The table isn't sorting a column correctly
Depending on the data, some browsers think dates are numbers. No problem, in the "Formatting" options, you can specifically declare the data type of every column or just the troubled column.
Why do all the numbers have commas in them?
By default, TableBuilder displays large numbers with commas every three decimal places. If you don't want any numbers formated, or just certain columns, you can adjust this option in the "Formatting" options.
Can I include links in the table?
Of course, URLs will be turned into links automatically. As will email address and twitter handles.
Can I request more options?
Sure, new request or bug reports can be made on GitHub.