Working with Tables on HTML and Dreamweaver

Hypothetical situation—you’re looking to put a table into your HTML using Dreamweaver that will house some information in an organized manner.

Reality—you have no idea how to accomplish this. Save the countless hours of staring at your screen hoping for telekinesis to somehow do it for you and follow these simple steps.

There’s a way to ‘cheat’ and a way to do it correctly. I’ll show you both ways, and you can pick whatever is more convenient and suitable to your needs. The correct way to do this is to code a table directly into your HTML. The way this is done is through a, *drumroll please*, TABLE CODE.

Here’s my code for a basic table. I’ll explain each of the parts next.

You can replace the textual information with what’s most relevant to you. This was just a table I used for annotations in a recent outline.

What does all that gibberish mean? ‘table width=200px’ is the total width the table, the borders are defined to be 5 pixels. The alignment is in the center. Between all the <td> and </td> tags lies the content of that box in the table. By adding more or deleting some of them, the table gets larger or smaller respectively. Ending the table is the </table> tag.


Now, here’s a way to cheat this entire process and code nothing. In Design mode, go to INSERT, TABLE.


Just specify the credentials you need, and press OK—simple as that.


Either way, you’ll get the same final product:

Good luck in the rest of your coding adventures!

-Greg Drupp

~ by gdd7 on November 2, 2011.

%d bloggers like this: