Tables in Dreamweaver

Name: Tables in Dreamweaver
Author: Patti Scully-Lane

While HTML provides the structure, CSS provides the beauty. In this module, you will familiarize yourself with what CSS is, how the different styles cascade…

Preview the first lesson free — get full access to all 4 lessons.

Request a demo Sign in

Course: On-Demand

In this lesson, you are going to learn how to create a table in Adobe Dreamweaver. Before we can work on our table, we do need to set up a site in Dreamweaver. So we're going to go to the Site menu, to New Site. We're going to name this Working with Tables, and we're gonna click on the folder icon. Now I have taken the lesson files folder from this Module3, and I put them on my desktop. So I'm going to select that Module3_tables and select that folder, and we're gonna click on the Save button. If you need to know a little bit more about working with sites in Dreamweaver, you can go back to Module1 and the lesson managing sites in Dreamweaver to learn a little bit more about why we work with sites in Dreamweaver. I'm gonna go over to the Files panel, and I'm gonna double-click on hikes.html. That will open up that file in our main window. We're going to be using a table as a true table in this document. However, it is important to note that in the beginning of designing for the internet, tables were used as design elements prior to CSS, Cascading Style Sheets, and they are still used today as design elements in HTML email. Now I have the Design view selected from my view modes. So if you have Live view selected, I'm gonna have you go up and select Design. And we're gonna put our cursor in this box over here on the left, and we're gonna type in HIKING TRAILS and then hit the enter key. Now in order to add a table, we're gonna go up to the Insert menu to Table. The table dialog box comes up, and we're going to create a table with three rows and two columns. We're going to have a table width of 300 pixels with a border thickness of one. Now, if we wanted to, we could choose to have either a header column, or a header row, or both, but we're going to leave that as none, and we're gonna click OK. In Dreamweaver, the easiest way to make changes to your table is down here in the Properties panel. So we're gonna change the width of the table from 300 to 600, and you can see how it fits nicely in that area. We're going to go to where it says Align. We're gonna change that from the Default to Center, so it's gonna center it nicely in our area. And we're gonna type in this top row Hiking Trails in MA. And, now, in order to get to the next section, all we have to do is click the tab key, and you can see that that changes our table just a little bit. And it's important to know that when you are designing tables there are certain things that make this a fluid table. And, so, it will change as we put information into our cells. I'm gonna hit the tab key one more time, and I'm gonna type in Trail Name, and tab key and type in Town. So, you can see, as I put in Town my columns change a little bit more. Now that we have a little bit more information in our table I want to go back in and make some additional changes to the table. So we're gonna click on this 600 up at the top of our table and select our table, and that allows us to bring our Properties panel for our table back up again. And we're gonna talk about the cell padding and the cell spacing of our table. If you do not put a number in your cell padding and your cell spacing, by default HTML is going to put one pixel of padding in each. Cell padding is the amount of space in between the edge of the cell and the content. So if we put 10 as the cell padding and hit the enter key, you can see how now our type is a little bit further away from the edge of our cells. Cell spacing, I'm just gonna put five in for now, is the amount of space in between the cells themselves. So I'm gonna delete that and hit the enter key and leave that as the default setting. Now the other property that we have for our table is the border. Currently, we do have a border of one, but you can see if we put in a border of zero, Dreamweaver, in Design view, will show us the edges of our table. But if we go to Live view you can see how we don't see the table border at all. I'm going to put this back to Design view because Design view does help us work much more efficiently when working with tables. In the next lessons, we will learn more about modifying and formatting our cells. So, in this lesson, you learned how to create a table in Adobe Dreamweaver.

Intermediate Provider : Patti Scully-Lane 4 Lessons · 30m in Arabic, German, English, Spanish, French, Portuguese, Urdu, Chinese

Course Description

While HTML provides the structure, CSS provides the beauty. In this module, you will familiarize yourself with what CSS is, how the different styles cascade, and what HTML elements can be stylized.

What You'll Learn

Understand the levels of CSS and CSS syntax
Create tables in Dreamweaver
Modify rows and columns in tables
Format rows and columns in tables
Recognize external versus internal styles
Import tabular data into a table

Key Takeaways

HTML provides the structure of a page while CSS provides the styling.
CSS styles cascade across different levels, and HTML elements can be stylized using CSS.
This module covers creating tables and modifying and formatting their columns and rows.
The course distinguishes between external and internal styles in CSS.
Learners can import tabular data directly into a table.

Frequently Asked Questions

What does this course cover?

This module covers what CSS is, how the different styles cascade, and which HTML elements can be stylized. It also teaches you to create tables, format and modify columns and rows, recognize external versus internal styles, and import tabular data into a table.

What skills will I gain from this course?

You will build skills in Adobe Dreamweaver, CSS Frameworks, HTML Components, HTML Formatting, HTML Tables, and Object Oriented CSS.

What lessons are included in this course?

The lessons are: Create a Table, Modify Rows and Columns in Tables, Format Rows and Columns in Tables, and Import Tabular Data into a Table.

What is the difference between HTML and CSS as taught in this course?

According to the course, HTML provides the structure while CSS provides the beauty, meaning CSS is used to style the HTML elements.