Page 1 of 1

Guide to the Web and Design part VI Tables Rate Topic: *---- 1 Votes

#1 capty99  Icon User is offline

  • i am colt mccoy
  • member icon

Reputation: 97
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Posted 03 October 2006 - 10:10 PM

HTML Basics Tables

Tables are falling on hard times in the web development community and there is actually a push to get them off the Internet. Mostly this is because tables used for page design cause cluttered unnatural code. There are other ways of displaying information now that is pretty much better, but nonetheless they can still be useful for you and helpful for your website viewers.

Just like in Microsoft word, or whatever program you use on the computer, tables are just rows and columns, but when you write them out in html you have to think a little bit more about it.

First, tables are somewhat expandable, in that you can add new rows when you need to, but for the most part you will probably want to think about what your going to do before you do it because the code, when just viewed at first can become somewhat a pain to fix.

I made a simple multiplication table : Go ahead and copy this to notepad and then view it to see how its going to work.
<table width="400" border="1" cellspacing="0" cellpadding="0">
  <tr>
	<td>Multipication Table</td>
	<td>1</td>
	<td>2</td>
  </tr>
  <tr>
	<td>1</td>
	<td>1</td>
	<td>2</td>
  </tr>
  <tr>
	<td>2</td>
	<td>2</td>
	<td>4</td>
  </tr>
  <tr>
	<td>3</td>
	<td>3</td>
	<td>6</td>
  </tr>
</table>


You can see the original container is Table, with attributes of width, border, cellspacing and cellpadding, we will discuss all of these and more in detail throughout this chapter. Obviously the width of the table is defined by width, but the height we did not identify. This is because the number of rows we will let decide the height. Cellspacing is exactly what it sounds like, the difference between the end of one cell and the beginning of another. Cellpadding is a different attribute that takes whatever input goes into the cells of the table and and 'pads' blank cell space around them. Go ahead and just try changing those numbers around for a visual of what I am trying to say.

Now, after the table identifiers we get to the <tr> tag, which stands for table row,
and the <td> tags which stand for table data. When you load up the page you might see the tables are a bit askew , but you can see how they work. The <tr> tags cut the table up into rows and then the <td> tags chop those rows up into individual cells.

So... lets even out these cells a little bit.
To change the width of an individual cell just go to the <td> tag and add the attribute width.
Same can be done for row height.

For both the total table width and just for cell width we can work with pixels, as we have been, or with percentages. So, setting the table width = 80% the browser will do just that and fill it up to 80% of the page.

This is a nice tool but if your using a bunch of elements in the table, then the result may look very different for two people on computers with two different monitor resolutions set.

You may also want to have one cell that spans multiple ones below or above it.
EXAMPLE

you can use the colspan and rowspan functions in the table.

Say we added a row above what we already had, and then combined the top left two cells.

Just add this code at the top of your table (right below the <table> tag and definitions :
<tr>
	<td  rowspan="2">This is your multipication table </td>
	<td colspan="2">Multipication Table</td>
  </tr>


There you go. Tables are really one of the things where each time you make them you will need something a little bit different and that working with them is definitely the best way to learn it. I have said that more than once but if you look at a page with a bunch of tables on it the code can be absolute mayhem until you have worked with them for a while and understand what is going on. Another table note is that tables will stretch to fit whatever content you put in them unless you specify measurements for it. Default for table borders is most likely 1, along with cell padding and spacing, so if you would like there to be no border make sure to set it to zero.

You can add color to your tables by adding the bgcolor attribute to the main table container, or to individual data cells, just as if you were adding a background color on your page. The align attribute we discussed about earlier when used on the paragraph container can be used on individual cells here also.

This post has been edited by capty99: 04 October 2006 - 07:16 AM


Is This A Good Question/Topic? 1
  • +

Replies To: Guide to the Web and Design part VI

#2 FiendKing04  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 10-August 08

Posted 21 October 2010 - 04:15 PM

I got caught up with RL stuff, but, I'm coming back to DIC and re-reading this tutorial.

This is great stuff, and, like you said, tables require lots of practice to get the hang of!

On to the next one!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1