Info Sheet 7: Setting-Up Table

Before table functionally was added to HTML, all images and text aligned on the left side of a
web page by default. Originally, tables were used to simplify presenting tabular data, such as scientific
reports, but clever designers quickly realized that tables could also be used to increase the design option.

Inserting Tables
1. In the Toolbox under Standard Group click and drag Table in your workspace.
2. In the Insert Table dialog box, go to General Tab. Inside Rows & Columns Group enter the
numbers of rows and columns you want.
3. Inside the Cell Group enter the amount of cell padding and cell spacing you want.
• Cell padding – refers to the amount of space between the cell content and cell wall.
• Cell spacing – refers to the space between individual cell.
4. Then click Ok.
5. Double click in the cell to add text or images.

Applying Background Color

1. Select the table you want to add background color.
2. Go to the Properties > Background Group.
3. In the Background Mode > Solid.
4. In the Background Color > enter the hexadecimal value or
click the drop-down arrow to select the color you desire.

Applying Border Color

1. Select the table you want to add border color.
2. Go to Properties > Border Group.
3. In the Border Color > enter the hexadecimal value or click
the drop-down arrow to select the color you desire.
4. Change the thickness of your border in Border Width.
5. Change the style of your border in Border Style.

Merging and Splitting Cells

• To Merge cells
1. Select number of cells you want to combine by holding CTRL and click the adjacent cell
you want to combine.
2. In the Table Tools inside the Layout Menu, go to Merge Group and click Merge.
• To Split Cell
1. Select the cell you want to split.
2. In the Table Tools, inside the Layout Menu, go to Merge Group and click Split.

To Add more Cells

1. Select the table you want to add more cells.
2. In the Table Tools, inside the Layout Menu, go to Rows & Columns Group and click:
• Insert Above – to add new row directly above the current row.
• Insert Below – to add new row directly below the current row.
• Insert Left – to add new column directly to the left of the current column
• Insert Right – to add new column directly to the right of the current column.
 Info Sheet 8: Working with Images

Most basic web pages are composed of combination of images, links, animations and text.
Images can add information to a page, or you can use a web page as a vehicle to display important
images such as artworks, product illustrations or portraits. Most web browsers display two image formats
GIF and JPEG.
Joint Photographic Expert Group (JPEG) format – it is designed for digitized color photographs.
JPEGs can support millions of colors and they are commonly used in designing web pages.
Graphics Interchange Format (GIF) format – it can support up to 256 colors. GIF format is the best
choice for images with large area of flat color, most non-photographic images and some black and white
or grayscale photographs, as well as many black and white graphics

Inserting Image
1. In the Toolbox under Images Group click and drag Image in your workspace.
2. Open dialog box will appear, select the image you want to insert.
3. If you want to resize the image. Go to Properties > General Group > Size. Enter the width and
height value of the image, or click the arrow on the left side of Size to show the height and width
textbox.
4. Or you can use the resizing handle around the image. In the left and right side of the image it is
use to specify the width and in the top and bottom of the image to specify the height, or in the
side to scale it. Hold Shift key to scale it uniformly.

The Difference between Image and Picture

In HTML image is a single object within your workspace. Picture on the other hand is use
Picture element in HTML5 which is a container used to specify multiple images for different viewport or
screen resolutions. The browser will choose the most suitable image according to the current layout of
the page and the device it will be displayed on.

Inserting Picture
1. In the Toolbox under Images Group click and drag Picture in your workspace.
2. Open dialog box will appear, select the image you want to insert.
3. Right-click the Picture container, in the menu select Object Properties.
4. Inside Picture dialog box, in adaptive Images group. Add different image with different
resolution.
5. When you lunch your page and resize your browser the image will change according to current
layout of the page.

Inserting Rollover Image

1. In the Toolbox under Images Group click and drag Rollover Image in your workspace.
2. Open dialog box will appear, select the image you want as original image.
3. In the Properties > Behavior Group > Hover Image > enter the filename and file extension of
the image or click the “…” to browse the rollover image.