×
Search TQA Weekly
×
Log into your TQA Weekly

Tables and Data Storage

Learn how to use HTML to create tables to storage data on a web-page

Steve Smith, host of your TQA Weekly, explains how-to use HTML to create tables for data storage with a visual requirement.

Episode #2-25 released on March 18, 2012

If you've created a web-page, and want to store data on the page in a readable manner, you need a table. Today, I'll teach you how to make a table for data, explain what else it can be used for, and what you shouldn't use tables for, on this episode of TQA Weekly.

Tables in HTML aren't hard to create. The are comprised normally of three nest tags. The first set of tags is the <table> tag, then the table row, or <tr> tag, and finally the table data, or <td> tag. You also have an optional table header, or <th> tag. This, of course, consists of several, ok, more than dozen of optional attributes. Let's start by looking at the default appearance of tables in HTML code.

<table>
<tr><td>insert content here</td></tr>
</table>

What is created is a single data entry table, kinda useless, you don't need a table for this. Tables are valuable when they encompass a lot more data. How about a small data task like hours of sleep a week.

<table>
<tr>
<td></td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
<td>Sunday</td>
<td>Total</td>
</tr>
<tr>
<td>Number of Sleep Hours</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
<td>56</td>
</tr>
</table>

Of course, the code is only starting to look difficult to work on, its actually easier to read in code than at first glance. We are always working in rows, not columns. We build up the columns, by building up rows upon rows.

Now, to create a data entry point that require more space, or a data block that spans rows or columns, we need to use an attribute to tell the table to give it more space. Sometimes this could be useful to demonstrate unchanging data in the table. The attributes to tell the table to create a row spanned table data point is rowspan, and column spanned table data points are given the colspan attribute.

Remember you can make as many as many rows, and therefore columns as you need. I find it particularly useful to use Excel, or even draw the suspect table on a piece of paper to calculate how many rows and columns I need.

Now, there are more attributes we should talk about before I forget. The most important attributes being height, width, background color, and border. Height, and width can be determined in pixels, or in percent, by preference. You can define the border by values like 1, 2 , 3. Borders can also be controlled using CSS, which I will be getting into in a future episode. Background color, is shortened to bgcolor, and you can use the name of the color, or the hex value. Red is #ff000, green is #00ff00, and blue is #0000ff. White is #ffffff, and black as a result is #000000. Now you can figure out what the hex value is with any modern graphic editor, if you need specific color like gold, silver, yellow, orange, etc...

You, also, have optional attributes like horizontal align, known as align, vertical align, known as valign, padding, known as cellpadding, and margin, known as cellspacing. Now, in order to align and vertically align content within a data cell, you need to imagine the data cell is a stage. There is 9 positions data can be placed. You can control whether the data is loaded at the top, middle, or bottom, these are the values for the valign attribute. You can, also, tell the data to be aligned left, center or right, which are the values for the align attribute. You use the align, and valign attributes to position the content in the data cell, in any of the possible 9 positions.

Margins and padding, two different attributes that can confuse you, at first. Margins are the defined as cellspacing in the HTML attribute world, and padding is defined as cellpadding. If you need more space between the data cells, you would increase the cellspacing. If you need more white space around the content within the data cell, you'd increase the cellpadding.

If you applied these attributes to the table row tag, and not the table data tag, you'd apply the appearance to all table data cells within the given table row. To change the look of only one of the cluster of table data cells, you could apply a different set of attributes to that cell. Keep in mind, that any changes may affect adjoining data cells.

Now that is all the basics of table design, how about we apply all of them to a table set. Let's take the original example, and modify it.

<table width="700px" height="150px" border="1" cellspacing="0" cellpadding="3">
<th colspan="9" bgcolor="#ff0000">Number of Hours Slept a Week</th>
<tr height="1em" bgcolor="#cccccc">
<td></td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
<td>Saturday</td>
<td>Sunday</td>
<td>Total</td>
</tr>
<tr>
<td bgcolor="#cccccc">Number of Sleep Hours</td>
<td colspan="5" align="center">8</td>
<td>12</td>
<td>12</td>
<td bgcolor="#cccccc">64</td>
</tr>
</table>

If you are wondering what else we used to use tables for, try formatting whole web-pages. Tables can be used to create the overall look of the whole web-site. The problem arises when we nest tables within tables. Best you use tables sparingly, and avoid nesting. Nesting is a term used to explain the negative usage of commands, by embedding identical commands, with other commands. However, with the newer DIV tags, this is now common practice , and considered good programming, as long as we don't nest tables, anymore. This is because the DIV tag is a universal block within HTML and CSS. You'll learn about that soon in two weeks.

For more information on this episode and the HTML codes used, please go to my show notes directly by visiting http://tqaweekly.com/se2ep25.

Next Week, we will be looking at our networks using the terminal in linux.

Remember to like, share and subscribe to TQA Weekly. For more information like our show notes, how to join our mailing list, get your own TQA Weekly branded gear and apparel, or for our Android Application, please visit tqaweekly.com. Stay safe and online, have a great day!

Host : Steve Smith | Music : Jonny Lee Hart | Editor : Steve Smith | Producer : Zed Axis Productions

Sources & Resources