Sample Post With Responsive Table

“Ack!” — how do you use web standards to organize reams of data? The very idea of tons of nested elements needed to get all the data into nice little rows and boxes ought to put your brain into “Ack!” mode, but there is a solution — tables to the rescue!

In web design tables are a good way to organize data into a tabular form. In other words, think of tables, charts, and other information graphics that help you to see and process a great deal of information in a summary that allows you to compare and contrast different pieces of data. You see them all the time on websites, whether they are giving a summary or comparison of political election results, sports statistics, price comparisons, size charts, or other data.

Back in the Jurassic Age of the Internet before CSS was popularised as a method of separating the presentation from structure of the HTML, tables were used as a way to lay out web pages — to create columns, boxes, and generally arrange the content. This is the wrong way to go about it; tables for layout resulted in bloated, messy pages with tons of nested tables — larger file sizes, hard to maintain, hard to modify after the fact. You’ll still see sites like this on the Web, but rest assured that these days you should just use tables for what they are designed for — tabular data — and use CSS to control layout. [HTML tables]

Table Code

<table>
<caption>Caption Table</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Address</th>
<th scope="col">Email</th>
<th scope="col">Phone Number</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row" data-label="Name">David Beckham</td>
<td data-label="Address">Manchester, England</td>
<td data-label="Email">davidbeckham@example.com</td>
<td data-label="Phone Number">021-01010xxx</td>
</tr>
<tr>
<td scope="row" data-label="Name">Mike Tyson</td>
<td data-label="Address">California, US</td>
<td data-label="Email">miketyson@example.com</td>
<td data-label="Phone Number">021-9198199189291929</td>
</tr>
<tr>  <td scope="row" data-label="Name">Justin Bieber</td>
<td data-label="Address">New York, US</td>
<td data-label="Email">justinbierber@example.com</td>
<td data-label="Phone Number">021-2929292929101019</td>
</tr>
<tr>
<td scope="row" data-label="Name">Selena Gomez</td>
<td data-label="Address">Texas, US</td>
<td data-label="Email">selena.gomez@example.com</td>
<td data-label="Phone Number">021-819199191991919</td>
</tr>
</tbody>
</table>

Tabel Result

Caption Table

Name	Address	Email	Phone Number
David Beckham	Manchester, England	davidbeckham@example.com	021-01010xxx
Mike Tyson	California, US	miketyson@example.com	021-9198199189291929
Justin Bieber	New York, US	justinbierber@example.com	021-2929292929101019
Selena Gomez	Texas, US	selena.gomez@example.com	021-819199191991919