Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Instant HTML5 Responsive Table Design How-to
  • Table Of Contents Toc
Instant HTML5 Responsive Table Design How-to

Instant HTML5 Responsive Table Design How-to

By : Fernando Monteiro
5 (2)
Buy this Book
close
close
Instant HTML5 Responsive Table Design How-to

Instant HTML5 Responsive Table Design How-to

5 (2)
By: Fernando Monteiro
Buy this Book

Overview of this book

We all know the importance of good design to the success of a product, service, or even a simple website. Serving content to fit different platforms, system and screen sizes is also a real challenge. If you want to present any information then data tables are ideal but making those tables pleasant to view on any and every device is not easy. Instant HTML5 Responsive Table Design How-to will help you with powerful responsive design techniques that allow you to present your data in the best way depending on the device. This practical guide uses the latest web development techniques to construct and deconstruct tables.Taking you from basic table markup, this book will walk you through semantics tags, and the new features of CSS3 that will improve your tables to look pixel perfect on any device.Use practical recipes to understand responsive design techniques in relation to data tables. Advance your knowledge of tables and learn how to handle large volumes of data, apply filters to columns, hide less important data, and load content dynamically. No matter how big the data and how small the device, by the end of this book it won't matter.
Table of Contents (7 chapters)
close
close
close
Instant HTML5 Responsive Table Design How-to
Icon
Instant HTML5 Responsive Table Design How-to
Credits
Icon
Credits
About the Author
Icon
About the Author
About the Reviewers
Icon
About the Reviewers
www.PacktPub.com
Icon
www.PacktPub.com
Preface
Icon
Preface
Lock Free Chapter
1
Instant HTML5 Responsive Table Design How-to
chevron up
Icon
Instant HTML5 Responsive Table Design How-to
Icon
Introducing the new HTML5 table (Simple)
Icon
Understanding responsive web design (Simple)
Icon
Getting started with responsive tables (Intermediate)
Icon
Dealing with numbers (Intermediate)
Icon
Increasing the numbers (Advanced)
Icon
Converting tables into graphs (Advanced)
Icon
Merging data – numbers and text (Advanced)
Icon
Mixing everything – texts, numbers, and more data (Advanced)

Mixing everything – texts, numbers, and more data (Advanced)

So far, during our examples we have seen several alternatives to deal with our tables, from simple CSS-based solutions to the use of JavaScript and some jQuery plugins.

We also saw how to convert our table into graph and several tips on how we can optimize its appearance in various screen sizes. Now we bring an extreme alternative, let's completely transform our table to use <div> elements.

Getting ready

Let's now use the jQuery method, replaceWith (), to make the transformation of the table's elements to div elements. (Code example: Chapter08_Codes_1)

More information about this method can be found here: http://api.jquery.com/replaceWith

The following screenshot shows how our table looks on this browser:

Screenshot of the browser at 1024px

How to do it...

We keep the same semantic table structure. Still we make use of the CSS3 pseudo-classes to help us with the style of the table. In our stylesheet we are using classes as .row and .column that are currently not in our markup.

  1. Add more style to Media Query breakpoint.

  2. Add the JavaScript to complete the task.

  3. Let's have a hands on experience:

    <table class="table">
      <thead>
        <tr>   
          <th scope="column"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row"></th>
          <td></td>
      </tr>
    </tbody>
  </table>

  4. Add the additional CSS as follows:

    .table{
  display:table;  
  border-bottom:2px solid #dddddd;
  margin:10px 0;
  width:100%;
}
.table-head{
   display: table-header-group; 
}
.table-head .column { 
  background:#333333;
  color:#7d7d7d;
  border-right:1px solid #5d5d5d;
  border-bottom:none;
}
.table-head .column:hover{ 
  background:#222222;
}
.row{
  display:table-row; 
}
.row .column:nth-child(1){ 
  border-left:1px solid #eeeeee;
}
.row:last-child .column{ 
  border-bottom:none;
}
.column{
  display:table-cell; 
  padding:10px 20px;
  border-bottom:1px solid #eeeeee;
  border-right:1px solid #eeeeee;
}
.column:hover{
  background:#f9f9f9;
}

  5. And finally add our Media Query as follows:

    @media all and (max-width: 768px){
  .table,
  .row,
  .column,
  .column:before{
    display:block;  
  }
  .table,
  .row .column:last-child{
    border-bottom:none;
  }
  .table-head{
    position:absolute;
    top:-1000em;
    left:-1000em;
  }
  .row{
    border:1px solid #eee;
    border-top:2px solid #ddd;
    border-bottom:2px solid #ddd;
    margin:20px 0;
  }
  .row .column:nth-child(1){ 
    border-left:none;
  }
  .row .column:last-child{ 
    border-right:none;
  }
  .row:last-child .column,
  .column{ 
    border-bottom:1px solid #eeeeee;
  }
  .column:before{ 
    font-weight:bold;
    padding-right:20px;
    font-size:12px;
    content:" "attr(data-label)" :";
  }
}

  6. Now the magic happens in our JavaScript, when we use the replaceWith() method:

    var headCol =  $('thead th').size();
  for ( i=0; i <= headCol; i++ )  {
    var headColLabel = $('thead th:nth-child('+ i +')').text();
      $('tr th:nth-child('+ i +')').replaceWith(
      function(){
        return $('<div class="column" data-label="'+ headColLabel +'">').append($(this).contents());
      }
    );
      $('tr td:nth-child('+ i +')').replaceWith(
        function(){
          return $('<div class="column" data-label="'+ headColLabel +'">').append($(this).contents());
        }
      );
  }  
  $('table').replaceWith(
    function(){
      return $('<div class="table">').append($(this).contents());
    }
  );  
  $('thead').replaceWith(
    function(){
      return $('<div class="table-head">').append($(this).contents());
    }
  );  
  $('tr').replaceWith(
    function(){
      return $('<div class="row">').append($(this).contents());
    }
  );  
  $('th').replaceWith(
    function(){
      return $('<div class="column">').append($(this).contents());
    }
  );

  7. Now when we resize our browser, all the table elements that we see before changed to div elements. Take a look at the result after the DOM is ready:

    <div class="table">
      <div class="table-head">
        <div class="row">   
          <div class="column" data-label="CONTACT">CONTACT</div>
          <div class="column" data-label="Manager">Manager</div>
        </div>
      </div>
      <tbody>
        <div class="row">
          <div class="column" data-label="CONTACT">Black Sabbath</div>
          <div class="column" data-label="Manager">Richard Both</div>
        </div>
    </tbody>
</div>

    The result on browser after resizing:

    As you can see, we transform table rows into divs and add the contents of our table.

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Instant HTML5 Responsive Table Design How-to
End of Chapter 1
Next Chapter
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon