Table with CSS

Lab 5

Layout

Tables 01

Row02

Column03

Style04

Tables:

Create Headings in a Table :

Add border:

Spanning Rows and Columns:

Alignment : may be “bottom” , “top” , “center” , “left” or “ right”

Creating table and caption:

Marking row groups

Marking Column Groups:

Marking Column Groups:

Adding a Table Summary:

Cell Spacing & Cell Padding:

Set the Width and Height of the Table to

a Specific Value

Output:

Set the Width of Columns

Set the Height of Row

Set the Table Frame

<table border="value" frame="type"> ... </table>

Set the Table Rules <table border="value" rules="type"> ... </table>

Control the Horizontal and Vertical Alignment

Control the Horizontal and Vertical Alignment

Formatting Tables with CSS

Formatting Tables with CSS

SUMMARY

Evaluation:

1- Open new file in notepad++ then save it as (.html) extension.

After that, enter your name and section within file as comment.

2- Write the code you need to display your webpage like Figure(

1)

3- Insert Tulips.jpg into vacation cell then set the height to 70 and

width to 750.

Evaluation Instruction:

Hints:

• border = "3".

• cellspacing="5".

• cellpadding="7".

• border color: green

• border style: dashed

• width and height of the table is 70% .

image src: https://www.gulf-up.com/c/1508604669841.jpg

Cont..:

Extra at home

Solve as individual

Extra:

Thank you