Throughout this book, we'll understand what elements make up a basic table and add some tags to improve the semantics of your code, also we'll use some JavaScript (or a jQuery Plugin) and JSON techniques to enhance the presentation, in addition you will be prepared to face the following challenges:

Introducing the new HTML5 table (Simple) gives an introduction to tables from a simple table to a semantic complex table using caption, thead, tfoot, tbody and scope. We also used some CSS properties to style our table and make it more pleasant to our eyes. And last but not the least, we will see how to deal with tables in a user experience perspective with some tips.

Understanding responsive web design (Simple) helps us understand how responsive design works, and which elements we use to make our tables responsive. A brief overview of the possible difficulties of handling tables responsively in small screens.

Getting started with responsive tables (Intermediate) explains the populating of a table with text and using some CSS3 Media Queries and a jQuery plugin to help you select some columns and apply filters to display the most relevant information to your users.

Dealing with numbers (Intermediate) explains how to load data using a JSON file with a few lines of JavaScript and jQuery as our table is correctly formatted.

Increasing the numbers (advanced) explains what happens when we increased the amount of data and introduced a small JavaScript library to improve the compatibility of some CSS3 properties not yet supported by all browsers.

Converting tables into graphs (Advanced) explains what happens when we convert the data and display a nice graphic for our users using a properly formatted table.

Merging data – numbers and text (Advanced) explains tables with numbers and texts are more common than you can imagine, using a few lines of JavaScript and a jQuery plugin, manipulate the data and apply filters by columns.

Mixing everything – texts, numbers and more data helps us organize our table and share data to optimize viewing and loading the table into smaller devices. Adding break points in our stylesheet for better consistency in different screen sizes.

All examples in the book use open source solutions and can be downloaded for free on the links provided in each recipe, however you may choose to use their own tools.

The book's examples use the JavaScript library jQuery 1.8.3, the most current version when writing this book, which can be downloaded for free here: http://jquery.com/download/.

The text editor called Sublime Text 2 can be found at http://www.sublimetext/2.

Also we made use of some small libraries (Polyfill) to help us with a better presentation in old browsers, that is "helps outdated browsers interpret new tags":

A modern browser will be very helpful too, we use Chrome, but feel free to use whichever you prefer, we recommend one of these: Safari, Firefox, Chrome, IE, and Opera and these are all in their latest versions.

A simple tool to change your browser size just for the development process, we use a Chrome extension and you can find it here:

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh

Even this solution is not the perfect but using this case is faster and cheaper than having several devices for testing.

And finally, we use a web server to process our JSON file and load it without problems.

We recommend using the Mongoose Server, as it is being very light and simple to use.

http://code.google.com/p/mongoose/downloads/list

Also if you need some help with the markup you can download the code examples.

If you're new to the world of responsive design techniques and want to explore the functionality available to style your tables and optimize its use for small-screen devices, this book is for you.

You must have a basic to intermediate knowledge of HTML, CSS, and jQuery, to follow the examples in the book, but a slightly more advanced knowledge of jQuery/JavaScript may be required in some recipes. Do not worry about it, the examples will detail all the code. Remember that we focus on the presentation of tabular data and all our examples are made in this form.

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "We can include other contexts through the use of the include directive."

A block of code is set as follows:

<table> 
    <tr> 
        <td>Band</td> 
        <td>Album</td> 
   </tr> 
</table>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<table> 
    <tr> 
        <th>Band</th> 
        <td>Album</td> 
   </tr> 
</table>

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Clicking the Next button moves you to the next screen".

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.