Scribd
Upload
7 views25 pages

Web Design

Uploaded by

Hayat Hyt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views25 pages

Web Design

Uploaded by

Hayat Hyt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

KHANA-E NOOR

UNIVERSITY
COMPUTER SCIENCE
FACULTY

Web Design
Chapter 3 Fall 2020
Sayed Ali Aqa
“Mousavi”
Outline

1. HTML Tables
2. HTML Table Attributes
3. HTML Table Styles
Defining HTML Tables
Example explained:
• Tables are defined with the <table> tag.
• Tables are divided into table rows with the <tr> tag.
• Table rows are divided into table data with the <td>
tag.
• A table row can also be divided into table headings
with the <th> tag.
Note!
An HTML Table with a Border Attribute

• If you do not specify a border for the table, it will be


displayed without borders.
• A border can be added using the border attribute:
An HTML Table with a Border Attribute
CSS border property
• To add borders, use the CSS border property:
Table with Collapsed
Borders
• If you want the borders to collapse into one border,
add CSS border-collapse:
HTML Table Headings
• Table headings are defined with
the <th> tag.
• By default, all major browsers
display table headings as bold
and centered:
Tip!

• To left-align the table headings, use the CSS text-


align property:
Table Cells that Span Many Columns

• Table Cells that Span Many Columns


• To make a cell span more than one column, use
the colspan attribute:
Table Cells that Span Many Columns
Table Cells that Span Many Rows

• To make a cell span more than one row, use


the rowspan attribute:
Table Cells that Span Many Rows
An HTML Table With a
Caption
• To add a caption to a table, use the <caption> tag:
Tip!
Summary

• Use the HTML <table> element to define a table


• Use the HTML <tr> element to define a table row
• Use the HTML <td> element to define a table data
• Use the HTML <th> element to define a table
heading
• Use the HTML <caption> element to define a table
caption
• Use the CSS border property to define a border
Summary
• Use the CSS border-collapse property to collapse cell
borders
• Use the CSS padding property to add padding to cells
• Use the CSS text-align property to align cell text
• Use the CSS border-spacing property to set the spacing
between cells
• Use the colspan attribute to make a cell span many
columns
• Use the rowspan attribute to make a cell span many rows
• Use the id attribute to uniquely define one table
Exercise 1
Exercise 2
Exercise 3
Exercise 4
Any Questions

You might also like