Learn Advanced and Basic HTML - Lesson 5

1
Learn HTML BasicsLesson No 05

• Publisher Attitude Academy

2
HTML Tables
Tag Description
lttablegt Defines a table
ltthgt Defines a header cell in a table
lttrgt Defines a row in a table
lttdgt Defines a cell in a table
lttheadgt Groups the header content in a table
lttbodygt Groups the body content in a table
lttfootgt Groups the footer content in a table
Cellpadding Property to add padding to cells
Cellspacing Property to set the spacing between cells
Colspan Attribute to make a cell span many columns
Rowspan Attribute to make a cell span many rows
Border Property to define a border
3
Defining HTML Tables
ltbodygt lttablegt lttrgt lttdgtJilllt/tdgt
lttdgtSmithlt/tdgt lttdgt50lt/tdgt lt/trgt
lttrgt lttdgtEvelt/tdgt lttdgtJacksonlt/tdgt
lttdgt94lt/tdgt lt/trgt lttrgtlttdgtJohnlt/tdgt
lttdgtDoelt/tdgt lttdgt80lt/tdgt
lt/trgt lt/tablegt lt/bodygt
4
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
ltbodygt lttable border"1px"gt lttrgtlttdgtJilllt/tdgt
lttdgtSmithlt/tdgt lttdgt50lt/tdgt lt/trgt
lttrgtlttdgtEvelt/tdgt lttdgtJacksonlt/tdgt
lttdgt94lt/tdgt lt/trgt lttrgtlttdgtJohnlt/tdgt
lttdgtDoelt/tdgt lttdgt80lt/tdgt
lt/trgt lt/tablegt lt/bodygt
5
HTML Table Headings
Table headings are defined with the ltthgt tag. By
default, all major browsers display table
headings as bold and centered
ltbodygt lttable border"1px"gt lttrgtltthgtFirstnamelt/t
hgt ltthgtLastnamelt/thgt
ltthgtPointslt/thgt lt/trgt lttrgtlttdgtJilllt/tdgt
lttdgtSmithlt/tdgt lttdgt50lt/tdgt lt/trgt
lttrgtlttdgtEvelt/tdgt lttdgtJacksonlt/tdgt
lttdgt94lt/tdgt lt/trgt lt/tablegt lt/bodygt
6
HTML Table Tag
ltbodygt lttable border"1px"gt lttheadgt lttrgt
ltthgtFirstnamelt/thgt ltthgtLastnamelt/thgt
ltthgtTotallt/thgt lt/trgt lt/theadgt lttbodygt
lttrgt lttdgtJilllt/tdgt lttdgtSmithlt/tdgt
lttdgt50lt/tdgt lt/tbodygtlttfootgt lttrgt lttdgtJohnlt/tdgt
lttdgtDoelt/tdgt lttdgt80lt/tdgt lt/trgt
lt/tfootgt lt/tablegt lt/bodygt
7
Table Cells that Merge Many Columns
To make a cell span more than one column, use
the colspan attribute
ltbodygt lth2gtCell that spans two columnslt/h2gt lttabl
e border"1px"gt lttrgt ltthgtNamelt/thgt ltth
colspan"2"gtTelephonelt/thgt lt/trgt lttrgt
lttdgtBill Gateslt/tdgt lttdgt555 77 854lt/tdgt
lttdgt555 77 855lt/tdgt lt/trgt lt/tablegt lt/bodygt
8
Table Cells that Merge Many Rows
To make a cell span more than one row, use
the rowspan attribute
ltbodygt lth2gtCell that spans two rowslt/h2gt lttable
border"1px"gt lttrgt ltthgtNamelt/thgt
lttdgtBill Gateslt/tdgt lt/trgt lttrgt ltth
rowspan"2"gtTelephonelt/thgt lttdgt555 77
854lt/tdgt lt/trgt lttrgt lttdgt555 77 855lt/tdgt
lt/trgt lt/tablegt lt/bodygt
9
Cellpadding
To make a cell span more , use the Cellpadding att
ribute
ltbodygt lth2gtCell that spans two rowslt/h2gt lttable
border"1px" cellpadding"15px"gt lttrgt
ltthgtNamelt/thgt lttdgtBill Gateslt/tdgt lt/trgt
lttrgt ltth rowspan"2"gtTelephonelt/thgt
lttdgt555 77 854lt/tdgt lt/trgt lttrgt lttdgt555 77
855lt/tdgt lt/trgt lt/tablegt lt/bodygt
10
Table Cellspacing
To make a cell span more than one row, use
the Cellspacing attribute
ltbodygt lth2gtCell that spans two rowslt/h2gt lttable
border"1px" cellspacing"20px"gt lttrgt
ltthgtNamelt/thgt lttdgtBill Gateslt/tdgt lt/trgt
lttrgt ltth rowspan"2"gtTelephonelt/thgt
lttdgt555 77 854lt/tdgt lt/trgt lttrgt lttdgt555 77
855lt/tdgt lt/trgt lt/tablegt lt/bodygt
11
PRACTICAL IMPLEMENTATION
12

• Visit Us Attitude Academy