How To Create a Table in Dreamweaver
In this video I'm gonna show you how to create a table in Adobe Dreamweaver, and how to style your table...
Download everything we made in this video (ZIP)
Hey everybody, Greg Davis here. In this video I'm gonna show you how to create a table in Dreamweaver, and how to style your table.
We don't use tables for layout anymore, we use divs for layout, but tables are still great for data, so that's what I'm going to show you, how to create a table for data.
I'm gonna insert a table right HERE.
I PUT my cursor there, I GO to my insert panel, Common, and TABLE.
Let's DO 4 rows, 3 columns, 500px wide, 0 border, 0 cell padding, and 0 cell spacing. You can change any of these later!
I CHOOSE a TOP row header.
The caption is kind of a header at the very top of your table. You can leave it blank if you don't need it. I TYPE in "Table 1" just so that you see how it works.
Ok, the summary is not a visible part of the table, so I'm gonna leave it blank.
I CLICK Ok, and HERE is my table.
I'm gonna need some content in it, so I PUT my cursor in my first header cell, and I TYPE in: Header 1.
In the next one I TYPE in "Header 2"
And "Header 3" in the last one
I have chosen a top row header, so this top row is the header of my table. And the content in the header is centered, and bold by default. And these cells are designated by <th> tags (table header)
My regular cells like THIS one, is designated by <td> tags.
You can style any of these tags with css. I'm gonna style them in just a bit, but first, I need more content inside of my table.
So in the first column, I TYPE in like 1, 2, 3.
In the next one I TYPE in Roma I, II, III.
Ok, let's GO to Code view, and see how the code looks like.
HERE is my START table tag, my END table tag. Inside of them THERE is my CAPTION, then I have my table rows in <tr> tags.
The very first row is my table header, because I have chosen a top row header. And again, the header cells are designated by <th> tags.
Then I have my regular table cells designated by <td> tags.
And inside of those tags, I have my content
My third column is still blank, and those blank table cells have a non-breaking space in them because in certain browsers if there is nothing in a particular cell, it will collapse. So DW have put a non-breaking space in those cells.
Let's GO back to Design view.
And in my third column, I TYPE in a, b, c.
Ok, I SELECT my regular table cells.
And I CHOOSE horizontal-align: center.
I can also change the vertical alignment.
And of course, I can edit my cells: I can change the width, the height of my cells.
I can also do it manually by simply moving the border.
I can change the background color of my cells. We're gonna do it with css, but you can do it here as well.
I can also merge my selected cells.
Or, if I SELECT one particular cell, I can split the cell into rows or columns.
Ok, I SELECT my table in my tag selector, and now I can change my table size: the number of rows, columns, the width, the padding, the spacing, and the border.
I can ALIGN my table, let's say Center.
And I can apply a class style to my table HERE, or an ID style HERE.
It's empty, because I don't have any ID styles in my css style sheet. I use CLASS styles, because I can apply a class style to any number of elements per page, and I like to keep things simple.
So, let's create a brand new class style for my table. I CLICK on New CSS Rule.
I need CLASS style.
I TYPE in a period, because it's gonna be a class style, and I NAME it as let's say "tableone"
I define the rule in my style.css file, I CLICK Ok.
I GO to background, and I CHANGE the background color to grey (#999).
I GO to border, and I need a solid, 1px, black border, all the way around.
I CLICK Ok.
Now I just PUT my cursor in my table, SELECT it in my tag selector, and I can APPLY the tableone class style to my table. There you go!
Now I'm gonna style my header cells. I PUT my cursor in a header cell.
I CLICK on New CSS Rule.
I need a compound selector, because I only wanna style those <th> tags, that are inside of my tableone class style.
I CLICK on less specific, I CLICK it again.
And this css rule is only gonna apply to those <th> header tags, that are inside of a <tr> tag, inside of a tableone class style.
I define the rule in my style.css file, I CLICK Ok.
I GO to background, and I CHANGE the background color to some dark grey (#666).
I GO to type, and I CHANGE the font color to white.
I GO to border, and I need a solid, 1px, black border, all the way around.
I CLICK Ok, and there you go!
Now I'm gonna style my regular table cells. I PUT my cursor in a regular cell.
I CLICK on New CSS Rule.
Again, I need a compound selector, because I only wanna style those <td> tags, that are inside of my tableone class style. I just CLICK on less specific twice.
And this css rule is only gonna apply to those <td> tags, that are inside of a <tr> tag, inside of a tableone class style.
I define the rule in my style.css file, I CLICK Ok.
I GO to border, and I need a Solid, 1px, black border, all the way around.
I CLICK Ok, and HERE is my table.
If you don't wanna see the table borders, and this green table width up HERE, CLICK on this little eyeball, and you can turn those off right HERE.
Ok, I'm gonna show you how to sort your table. I PUT my cursor in my table, GO to my Commands menu, and I CHOOSE Sort table…
All you have to do is, tell DW how you wanna sort your table, and DW is gonna sort it for you. It's easy!
Ok, I end this video now. I hope you enjoyed it. Thanks a lot for watching, and see you in the next video. Bye!
Next video:
Building a Web From in Dreamweaver>>>All videos in recommended learning order:
How to design a website using Adobe Fireworks>>>
Building a Website Start To Finish With Dreamweaver>>>
How To Embed a YouTube Video On Your Website>>>
Floating Div Tags in Dreamweaver>>>
How To Create a Table in Dreamweaver>>>
Building a Web From in Dreamweaver>>>
Dreamweaver CSS Website Layouts>>>
Creating a CSS Drop Down Menu in Dreamweaver>>>
Creating a Spry Menu Bar in Dreamweaver>>>
Creating Spry Tabbed Panels in Dreamweaver>>>
Creating a Spry Collapsible Panel in Dreamweaver>>>
Working with the Spry Tooltip Widget in Dreamweaver>>>
Creating a Web Photo Gallery/Album in Dreamweaver>>>