dcsimg

10 Tools for Building and Styling Tables

By Cristian Ionescu

WEBINAR:
On-Demand

Desktop-as-a-Service Designed for Any Cloud ? Nutanix Frame


There are many resources available to help you make HTML tables look much better, giving you some specific techniques for creating tables. The data visualization provided through these resources helps us to better understand the sometimes complex information inserted into tables.

There are multiple ways to be able to visualize your data, using interactive charts or by designing interesting infographics. Everything depends on how you want to present the data in the table. In the lines below we will discuss plugins, scripts and tools — through which you can create a variety of tables to display the data as beautifully as possible.

1. HTML Table Generator

Using this tool, you can make HTML tables easily and with the desired settings. The properties of the table can be adjusted from the right side by clicking on a cell on the left. You can also move the cursor over fields and see the current dimensions of the table. Here is an example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Table Generator</h2>
<style>
table.HtmlGenerator {
width: 100%;
background-color: #ffffff;
border-collapse: collapse;
border-width: 2px;
border-color: #FF7F50;
border-style: solid;
color: #000000;
}
table.HtmlGenerator td, table.HtmlGenerator th {
border-width: 2px;
border-color: #FF7F50;
border-style: solid;
padding: 3px;
}
table.HtmlGenerator thead {
background-color: #FF7F50;
}
</style>
<table class="HtmlGenerator">
<thead>
<tr>
<th>Tennis player</th>
<th>Tennis player</th>
<th>Tennis player</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
</body>
</html>

2. Table jQuery Snippets

Through these fragments, together with the explanations, they help you to develop extremely interactive tables. These fragments allow you to add rows, but also to retrieve the cell values.

3. Styling Tables

Through a set of tips and tricks, you can efficiently model your tables, improving the alignment of the text, the appearance, the typography, the addition of colors and graphics and more. Here is an example:

<!DOCTYPE html>
<html>
<body>
<h2>Styling tables</h2>
<style>
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
border: 3px solid #A9A9A9;
}
thead th:nth-child(1) {
width: 30%;
}
thead th:nth-child(2) {
width: 20%;
}
thead th:nth-child(3) {
width: 15%;
}
thead th:nth-child(4) {
width: 35%;
}

th, td {
padding: 20px;
}
html {
font-family: 'helvetica neue', helvetica, arial, sans-serif;
}
thead th, tfoot th {
font-family: 'Rock Salt', cursive;
}
th {
letter-spacing: 2px;
}
td {
letter-spacing: 1px;
}
tbody td {
text-align: center;
}
tfoot th {
text-align: right;
}
tbody tr:nth-child(odd) {
background-color: #FF7F50;
}
tbody tr:nth-child(even) {
background-color: #FFF8DC;
}
tbody tr {
background-image: url(noise.png);
}
table {
background-color: #D2691E;
}
</style>
<table>
<caption>List of UK number 1 men's tennis players</caption>
<thead>
<tr>
<th scope="col">Roger Taylor</th>
<th scope="col">Mark Cox</th>
<th scope="col">Buster Mottram</th>
<th scope="col">Jeremy Bates</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Roger Taylor</th>
<td>1976</td>
<td>9</td>
<td>Roger Taylor MBE (born 14 October 1941) is a British former tennis player. Born in Sheffield, South Yorkshire, he won 6 singles titles and 10 doubles titles during his career.</td>
</tr>
<tr>
<th scope="row">Mark Cox</th>
<td>1976</td>
<td>6</td>
<td>Mark Cox is a Scottish comedian and actor, best known for his role as Tam Mullen in the sitcom Still Game. Cox was born in Springboig, Glasgow, and attended Saint Andrew's Roman Catholic Secondary School in the East End.</td>
</tr>
<tr>
<th scope="row">Buster Mottram</th>
<td>1974</td>
<td>17</td>
<td>Christopher "Buster" Mottram (born 25 April 1955 in Kingston upon Thames) is a former English tennis player and UK number 1 who achieved a career-high singles ranking of world No. 15 in February 1983.</td>
</tr>
</tbody>
</table>
</body>
</html>

4. Scrollable Table Body

Using these simple tricks, you can solve the problem of creating the table head scrolling head with fixed table headers. Using this trick, you can make it easier to use the data table. The table header is fixed when the user scrolls down. Here is an example:

<!DOCTYPE html>
<html>
<body>
<h2>Scroll-able Table Body</h2>
<style>
<tbody>
display:block
</tbody>
.fixed_header{
width: 400px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_header tbody{
display:block;
overflow:auto;
height:200px;
width:100%;
}

.fixed_header thead {
background: black;
color:#fff;
}

.fixed_header th, .fixed_header td {
padding: 5px;
text-align: left;
width: 200px;
}
.fixed_header thead tr{
display:block;
}
</style>
<table class="fixed_header">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1-0</td>
<td>row 1-1</td>
<td>row 1-2</td>
<td>row 1-3</td>
<td>row 1-4</td>
</tr>
<tr>
<td>row 2-0</td>
<td>row 2-1</td>
<td>row 2-2</td>
<td>row 2-3</td>
<td>row 2-4</td>
</tr>
<tr>
<td>row 3-0</td>
<td>row 3-1</td>
<td>row 3-2</td>
<td>row 3-3</td>
<td>row 3-4</td>
</tr>
<tr>
<td>row 4-0</td>
<td>row 4-1</td>
<td>row 4-2</td>
<td>row 4-3</td>
<td>row 4-4</td>
</tr>
<tr>
<td>row 5-0</td>
<td>row 5-1</td>
<td>row 5-2</td>
<td>row 5-3</td>
<td>row 5-4</td>
</tr>
<tr>
<td>row 6-0</td>
<td>row 6-1</td>
<td>row 6-2</td>
<td>row 6-3</td>
<td>row 6-4</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
<td>row 7-3</td>
<td>row 7-4</td>
</tr>
</tbody>
</table>
</body>
</html>

5. Fixed Table Header

Another trick I want to talk about is Fixed Table Header, which helps you make a table with fixed header and rolling content. You can also customize the table, as well as fonts and colors.

6. Pure CSS Table Highlight

Another simple trick is to highlight a certain table, both vertically and horizontally. The final table is customizable with fonts and colors. I would consider this trick most useful when you have to display numbers on the table. Here is an example:

<!DOCTYPE html>
<html>
<body>
<h2>Pure CSS Table Highlight</h2>
<style>
html,
body {
height: 300%;
}
body {
margin: 0;
background: linear-gradient(45deg, #49a09d, #5f2c82);
font-family: sans-serif;
font-weight: 100;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container thead {
background-color:lightpurple;
}
table {
width: 800px;
border-collapse: collapse;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
th,
td {
padding: 15px;
background-color: rgba(255,255,255,0.2);
color: #fff;
}

th {
text-align: left;
}
thead {
th {
background-color: red;
}
}
</style>
<div class="container">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

7. Rapid Tables HTML Table Generator

HTML Table Generator by Rapid Tables is another tool that offers several customization options, such as border customization, size, alignment, color and more. This tool only accepts manual table creation and does not allow importing documents or retrieving data from a spreadsheet tool such as Google Docs.

8. HTML Table Styler

HTML Table Styler is a table customization tool, allowing you to model your tables using on-screen options that generate CSS for your table in HTML. This tool shows a preview of the table, allowing you to test and try live styling options. Also, offer enough themes for the quick stylization of a piece, which you can customize otherwise.

9. Handsontable

Handsontable is an innovative component in spreadsheets for web applications that allows you to quickly develop and provide spreadsheets in applications. It offers a wide variety of functions, such as high-performance support, support for multiple frameworks, with massive amount of data, filtering, search capabilities, giving developers the opportunity to build quickly.

10. KingTable

KingTable allows you to build administrative tables using minimal coding. It is delivered by default with a fairly large number of functions, including sorting, filtering, searching, and regular functions from the client or server. You can also customize the look of the table by adding custom filters and exporting data in various formats such as JSON, Excel or CSV.



  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date