Opencart – should I use tables?

This article will deal with the topic of HTML tables, what they are, whether to use them and how and when to use them.

What is a table?

An HTML table is an element comprised of table rows and columns, much like you’d see when working with an application such as Excel. Tables are container elements, and their sole purpose is to house other HTML elements and arrange them in a tabular fashion — row by row, column by column.

Tables are defined with the <table> tag.

Tables are divided into table rows with the <tr> tag.

Table rows are divided into table data with the <td> tag.

A table row can also be divided into table headings with the <th> tag.

<table border="1">
  <tr>
    <td>Row 1 Cell 1</td>
    <td>Row 1 Cell 2</td>
  </tr>
  <tr>
    <td>Row 2 Cell 1</td>
    <td>Row 2 Cell 2</td>
  </tr>
</table>

Should I use tables?

This is a very good question. Tables have been being used for a long time now in the world of web development. In the beginning they were used to build entire websites. This was back when CSS was not even in use. CSS, (cascading style sheets) is client side scripting language that aids in styling html elements. It’s so advanced now that you can make a single elements look the same in all modern browsers. This doesn’t however completely wipe away the need for tables and if used in the right place they can be very useful indeed. With the current CSS capabilities you can even style out tables to look the same in all modern browsers. I’d recommend staying away from tables unless you need to use them. It’s  a better habit to use CSS for all of your HTML design and use tables just to display data.

Opencart actually does use tables in certain places. Let’s take a look at a template page where tables are used. Navigate to /admin/view/template/catalog/attribute_group_list.tpl

Here you will see the following code:

 <table class="table table-bordered table-hover">
              <thead>
                <tr>
                  <td style="width: 1px;" class="text-center"><input type="checkbox" onclick="$('input[name*=\'selected\']').prop('checked', this.checked);" /></td>
                  <td class="text-left"><?php if ($sort == 'agd.name') { ?>
                    <a href="<?php echo $sort_name; ?>" class="<?php echo strtolower($order); ?>"><?php echo $column_name; ?></a>
                    <?php } else { ?>
                    <a href="<?php echo $sort_name; ?>"><?php echo $column_name; ?></a>
                    <?php } ?></td>
                  <td class="text-right"><?php if ($sort == 'ag.sort_order') { ?>
                    <a href="<?php echo $sort_sort_order; ?>" class="<?php echo strtolower($order); ?>"><?php echo $column_sort_order; ?></a>
                    <?php } else { ?>
                    <a href="<?php echo $sort_sort_order; ?>"><?php echo $column_sort_order; ?></a>
                    <?php } ?></td>
                  <td class="text-right"><?php echo $column_action; ?></td>
                </tr>
              </thead>
              <tbody>
                <?php if ($attribute_groups) { ?>
                <?php foreach ($attribute_groups as $attribute_group) { ?>
                <tr>
                  <td class="text-center"><?php if (in_array($attribute_group['attribute_group_id'], $selected)) { ?>
                    <input type="checkbox" name="selected[]" value="<?php echo $attribute_group['attribute_group_id']; ?>" checked="checked" />
                    <?php } else { ?>
                    <input type="checkbox" name="selected[]" value="<?php echo $attribute_group['attribute_group_id']; ?>" />
                    <?php } ?></td>
                  <td class="text-left"><?php echo $attribute_group['name']; ?></td>
                  <td class="text-right"><?php echo $attribute_group['sort_order']; ?></td>
                  <td class="text-right"><a href="<?php echo $attribute_group['edit']; ?>" data-toggle="tooltip" title="<?php echo $button_edit; ?>" class="btn btn-primary"><i class="fa fa-pencil"></i></a></td>
                </tr>
                <?php } ?>
                <?php } else { ?>
                <tr>
                  <td class="text-center" colspan="4"><?php echo $text_no_results; ?></td>
                </tr>
                <?php } ?>
              </tbody>
            </table>

I wanted to go over a couple of key points in the code above. 1st, I believe that if there was ever a place to use tables it would be in an ADMIN SECTION such as this because honestly it doesn’t matter much that it looks the same in all browsers. It’s the admin! Second, this code snippet is great because it shows the use of PHP with tables and how you can echo rows of data from within the PHP FOREACH LOOP. This is the loop here:

 <?php foreach ($attribute_groups as $attribute_group) { ?>

More information about tables

Tables actually can be responsive with a little bit of work. In today’s modern web age there is a strong need for mobile ready websites, sites that are truly responsive to all types of devices. Here is a great web page that explains how to do this: http://zurb.com/playground/responsive-tables

Plugins such as Jquery Data-tables are extremely powerful because of their ability to display large amounts of data efficiently and stylishly. This plugin also allows you to sort data intuitively. Jquery, and Tables together make this powerful plugin the most popular one today: http://www.datatables.net/

Looking for quality OpenCart Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , | Posted under OpenCart | RSS 2.0

Author Spotlight

Joe Stenhouse

I am a web application developer that specializes in PHP, JAVASCRIPT, MYSQL, HTML, and CSS. We manifest exciting potentials within the world wide web through means of innovation.

Leave a Reply

Your email address will not be published. Required fields are marked *