HTML tables provide a regular structure of rows and columns similar to a spreadsheet.
They're intended to be used to display data such as sales figures, weather statistics or sports results, like the example shown here.
For many years, designers hijacked tables for page layout.
But doing so causes severe accessibility problems for the blind and people with other disabilities.
So, you should use tables only for data.
So, let's see how to insert a table in Dreamweaver CC.
First, I'm going to create a blank new HTML page.
So, File, New..., HTML, Layout "none", and then I'm going to save that page in the DWCC2014, Exercises site, as "table_insert.html".
There are several ways to insert a table.
The first thing you must make sure is that you're in Design view.
You can't insert a table in Live view.
Well, you can, but it's extremely difficult.
Then go to the Insert menu and select Table.
There's also a keyboard shortcut, Ctrl Alt T on Windows, Command Option T on a Mac.
You can also use the Insert panel.
So, if you select the Insert panel, make sure that Common is selected from the menu at the top left of the panel, and then you can insert a table from there.
If you click that, it will open the insert Table dialog box, you set the number of rows and columns, you can change your mind about the number of rows and columns later.
Let's just have 6 Rows and we'll have 3 Columns.
Table width: It's a good idea to remove the Table width because tables automatically expand to accommodate the contents.
Border thickness: In HTML5, you should only ever have one pixel as the border thickness.
If you want a thicker border on your table, you should do that with CSS.
Most tables though look better without a border at all, so, I'm going to remove that.
Cell padding adds horizontal and vertical space inside each table cell.
If you use this, it will add the same amount all around.
In HTML5, cell padding is now deprecated, so you shouldn't use it, it's better to use CSS.
The same goes for Cell spacing.
It always adds the same amount of space around each cell and it's far better to do it with CSS.
This next section is where you decide where you want to have header cells.
You can have no header cells at all, you can have them on the left-hand side, across of the top or both across the top and down the side.
I'm going to select Both and then in the Accessibility section, you've got the option to add a Caption.
If you think that you're going to have a caption for your table, it's a good idea to put some placeholder text in here because you can't reopen the Table dialog box once you've created the table.
So, if you want to create a caption, do it here, otherwise you'll have to go into the underlying HTML code afterwards to insert the caption manually.
So, I'm just going to put "Placeholder caption" in there.
Summary is no longer used, it's been removed from HTML5.
The summary element for a table was never actually displayed in the web page.
It was designed entirely for accessibility purposes.
And it's now recommended that you should either use a caption or some other way of describing what's in the table.
So, once you've made your choices, just click OK.
And this inserts both the placeholder caption and the table.
Now, with nothing in the table, it's obviously very difficult to insert anything inside those cells.
So, if you mouse over the table and then right-click from the Context menu, select Table and then right down at the bottom, Expanded Tables Mode.
And this expands the cells to make it much easier to insert text inside them.
This is simply a visual tool within Dreamweaver CC, it doesn't actually do anything to the table, it doesn't add anything to the underlying HTML.
But it makes it easier to click in there, so you can start typing.
We'll add a heading, then you can press Tab to go into the next cell.
Once you got content in the first row, you can exit Expanded Tables mode by clicking Exit at the top here, then the table contracts to its normal size.
Because I selected headers for both sides, the top row is all in bold.
So, if I click in this cell here and type a number, that's also in bold and it's centered, this is because it uses a "th" element.
But in the next one, if I type something, it'll be left aligned, and in normal text.
That's because it's using a "td" a table data cell.
Notice that as I started typing, the table cells automatically expanded to accommodate the content.
In Design view, you get these dotted lines to indicate where the table cells are, but if you switch to Live view, they disappear, that shows you what it would look like in a browser.
And if you go back to Design view, you can continue adding content to the table.
There are several ways to insert a table in Dreamweaver CC, one of them is to go to the Insert panel and select Table.
Make sure that Common is selected at the top left of the panel.
Alternatively, you can go to the Insert menu and select Table or use the keyboard shortcut Ctrl Alt T on Windows, or Command Option T on a Mac.
And the table will be inserted wherever your insertion point is at the moment in Design view.
Inside the Table dialog box, you set the number of rows and columns you initially want.
It's also a good idea to remove the width, because tables automatically expand to accommodate the content inserted into them.
You should also decide if you want to include table headers in the left column, the top row, both or not at all.
You can also add a table caption which is normally displayed above the table, but which can be moved below using CSS.
