Creating Tables in Design View |
1. There are tons of things to consider when making a table. Such as the # of rows and columns, the width of the table, the border thickness, and cell padding and spacing.
2. To make a table, go to Insert > Table or press CTRL + ALT + T. You will get this dialog box. |
|
| 3. Let's make a basic table with 4 rows and 4 columns, a table width of 87%, a border thickness of 1 pixels, 2 cell padding, and no sell spacing, and no header. |
|
| 4. This is what it will look like. By default it will align to the left. That doesnt really look good so. While in design view, the main way you will edit everything is using the properties pannel. In the top area of the properties pannel, there is the align dropbox. In the dropbox, go to down to center. Now the table will be centered in every browser, regardless of screen size. While looking at the propertiest pannel, lets change the bg color (background color) to black, and the Brdr Color (border color) to yellow using the dropboxes next to each. Your propertiest pannel should now look like the one below. |
|
| 5. Now click in any of the boxes of the table and start typing. We have a small problem, the background color is black and so is the font color. We want to change all the font colors in the table to white. Click and drag diagonally from the top left box to the bottom right. The properties pannel has now changed. Find the font color box (directy under the CSS button in the top area) and change it to white. This is what the properties pannel should look like now. |
|
| 6. Lets get creative now. We are going to combine and split some cells. Use these buttons to combine and split cells, they are found at the bottom left of the propertiest pannel. Merge is the left botton, split is the right button. |
|
| In the first column of your table, combine the first 2 cells using the merge button. Still in the first column, split the second from last cell. Now move to the second from left column, combine the 2 middle cells. Now move to the bottom row and combine the two cells to the right. There are now 3 columns in the bottom row, split the middle cell. Now click and drag through the 4 top right cells and combine them. Your table should now look like this, I have typed in all the cells to make them more visible. |
|
| 7. Save the file, it will be used in the next tutorial. |
|
