[go: up one dir, main page]
Scribd
Upload
8 views39 pages

HTML5 XP - Session 9 - Done

Uploaded by

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

HTML5 XP - Session 9 - Done

Uploaded by

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

y

nl
O
se
U
tre
en
Session: 9
C
h
ec

Creating Tables
pt
rA
Fo
 Describe how to create and format tables

y
nl
 Explain the table size and the width of a column

O
 Explain the process of merging table cells
 Explain the page layout for tables

se
U
tre
en
C
h
ec
pt
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 2


y
A table is made up of rows and columns. The intersection of each row and

nl
column is called as a cell.

O
se
A row is made up of a set of cells that are placed horizontally.

U
A column is made up of set of cells that are placed vertically.

tre
en
The user can represent the data in a tabular format by using the <table>
element in HTML.
C
h
The <tr> element divides the table into rows and the <td> element specifies
ec
columns for each row.
pt

By default, a table does not have a border.


rA

The border attribute of the <table> element specifies a border for making the
Fo

table visible in a Web page.

© Aptech Ltd. Creating Tables / Session 9 3


 The Code Snippet demonstrates how to create a table.

y
nl
<!DOCTYPE HTML>

O
<html>
<head>

se
<title>Languages</title>
</head>

U
<body>
<h2>Main Languages</h2>

tre
<table border=”1”>
<tr>

en
<td>English</td>
<td>German</td>
</tr> C
h
<tr>
ec

<td>French</td>
<td>Italian</td>
pt

</tr>
</table>
rA

</body>
Fo

</html>

© Aptech Ltd. Creating Tables / Session 9 4


y
 The code uses the <table> element to create a table.

nl
 The border attribute of <table> element gives a border to the table, which is 1

O
pixel wide.
 The <tr> element within the <table> element creates rows.

se
 The <td> element creates two cells with the values English and German in the

U
first row and French and Italian in the second row.
 Following figure displays the table created.

tre
en
C
h
ec
pt
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 5


 The user can specify the heading for each column in HTML.

y
nl
 To specify the heading for columns in a table, use the <th> element.
 The text included within the <th> element appears in bold.

O
 The Code Snippet demonstrates how to create a table with a heading.

se
<!DOCTYPE HTML>

U
<html>
<head>

tre
<title>List of Students </title>

en
</head>
<body>

C
<h2>List of Students</h2>
<table border=”1”>
h
ec
<tr>
<th>Name</th>
pt

<th>Age</th>
rA

<th>Place</th>

</tr>
Fo

© Aptech Ltd. Creating Tables / Session 9 6


<tr>

y
nl
<td>Mark</td>
<td>17</td>

O
<td>Madrid</td>

se
</tr>
<tr>

U
<td>John</td>
<td>19</td>

tre
<td>London</td>
</tr>

en
</table>
</body>
</html> C
h
ec

 In this code, the <table> element creates a table with a border of 1 pixel.
 The <th> element provides three column headings namely, Name, Age, and
pt

Place.
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 7


y
The second and the third row lists the details of the students in the three

nl
columns.

O
Following figure displays the output of the table with headings.

se
U
tre
en
C
h
ec
pt
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 8


y
Spanning refers to a process of extending a cell across multiple rows or columns.

nl
 To span two or more columns, use the colspan attribute of the <td> and <th>

O
elements.
 The colspan attribute allows the user to span a cell along a horizontal row.

se
 The value of the colspan attribute specifies the number of cells across which a
specific cell shall be expanded.

U
 The Code Snippet demonstrates how to create a table and span header cells

tre
across two cells vertically.

en
<!DOCTYPE HTML>
<html>
<head> C
h
<title>Employee Details</title>
ec

</head>
<body>
pt

<h2>Employee Details</h2>
rA

<table border=”1”>
Fo

© Aptech Ltd. Creating Tables / Session 9 9


y
nl
<tr>

O
<th colspan=”2”>IT</th>
<th colspan=”2”>Accounts</th>

se
</tr>
<tr>

U
<th>Name</th>
<th>Location</th>

tre
<th>Name</th>
<th>Location</th>

en
</tr>
<tr>
C
<td>David</td>
h
<td>New York</td>
ec

<td>John</td>
<td>London</td>
pt

</tr>
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 10


y
<tr>

nl
<td>Katthy</td>

O
<td>New Jersey</td>
<td>Peter</td>

se
<td>Los Angeles</td>
</tr>

U
</table>

tre
</body>
</html>

en


C
The code creates a table with a border of 1 pixel.
The <th> element specifies two column headings namely, IT and Accounts.
h

ec
Each of these header cells horizontally span across the two cells by setting the
colspan attribute of the <th> element to 2.
pt

 Each of these headings has two sub-headings namely, Name and Location, which
rA

specify the name and location of employees.


 The first and second rows display the details of the employees.
Fo

© Aptech Ltd. Creating Tables / Session 9 11


 The rowspan attribute spans a data cell across two or more rows.

y
nl
 It allows the user to span a data cell along a vertical column.
 Like the colspan attribute, the rowspan attribute can be used within the <td>

O
and <th> elements.

se
 The Code Snippet demonstrates how to span a cell across multiple rows.

U
<!DOCTYPE HTML>
<html>

tre
<head>
<title>Automobile Gallery</title>

en
</head>
<body>

C
<table border=”1”>
<tr>
h
<th>Manufacturer</th>
ec

<th>Model</th>
<th>Price</th>
pt

</tr>
rA

<tr>
<th rowspan=”3”>Audi</th>
Fo

<td>A4</td>
<td>34.5</td>
</tr>
© Aptech Ltd. Creating Tables / Session 9 12
<tr>

y
<td>A5</td>

nl
<td>42.6</td>

O
</tr>
<tr>

se
<td>A6</td>
<td>30.75</td>

U
</tr>

tre
<tr>
<th rowspan=”2”>BMW</th>

en
<td>328i</td>
<td>28.25</td>
</tr>
<tr> C
h
<td>530d</td>
ec

<td>47.5</td>
</tr>
pt

</table>
rA

</body>
</html>
Fo

 The code creates a table with a border width of 1 pixel.

© Aptech Ltd. Creating Tables / Session 9 13


 The three <th> elements within the <tr> element specify column headings

y
nl
namely, Manufacturer, Model, and Price.

O
The rowspan attribute of the <th> element combines the three rows of the
Manufacturer column into a common brand namely, Audi.

se
 The three different models and the respective prices of the Audi brand are
displayed in three different rows.

U
 Similarly, the rowspan attribute of the <th> element combines the next two rows

tre
of the Manufacturer column into a common brand called BMW.
 Following figure displays the rowspan attribute effect.

en
C
h
ec
pt
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 14


 Alignment determines the representation of text along the left, right, or center

y
nl
positions.
 In HTML, by default, the data within the table is aligned on the left side of the

O
cell.

se
 HTML5 has deprecated the align attribute.
 The four possible values for setting the horizontal alignment are as follows:

U
left:

tre
• Aligns the data within a cell on the left side. This is the default value
for table content.

en
center:
C
• Aligns the data within the cell on the center. This is the default value
h
for table headings.
ec

right:
pt

• Aligns the data within the cell on the right side.


rA

justify:
Fo

• Aligns the data within the cell by adjusting the text at the edges.

© Aptech Ltd. Creating Tables / Session 9 15


 To set the alignment with style you can use the text-align attribute to specify the

y
nl
horizontal alignment.

O
The Code Snippet demonstrates how to center align the table data.
<!DOCTYPE HTML>

se
<html>

U
<head>
<title>Automobile Gallery</title>

tre
</head>
<body>

en
<table border=”1”>
<tr>
<th>Sr.No.</th>
C
<th>Medicine Name</th>
h
<th>Price</th>
ec

</tr>
<tr style=”text-align: center;”>
pt

<td>1</td>
rA

<td>Captopril</td>
<td>12.45</td>
Fo

</tr>

© Aptech Ltd. Creating Tables / Session 9 16


y
<tr style=”text-align: center;”>

nl
<td>2</td>

O
<td>Ceftriaxone</td>
<td>6.94</td>

se
</tr>
<tr style=”text-align: center;”>

U
<td>3</td>
<td>Ciprofloxacin</td>

tre
<td>56.21</td>
</tr>

en
</table>
</body>
</html>
C
h
ec

 The code aligns the data within the row using a style within the <tr> element.

pt

The table content is center aligned by setting the value of the text-align
attribute to center.
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 17


y
Following figure displays the horizontal alignment.

nl
O
se
U
tre
en
C
h
ec
pt
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 18


 Users can vertically align the position of data earlier by using the valign

y
nl
attribute.
 HTML5 has deprecated the valign attribute.

O
 The possible values of vertical alignment are as follows:

se
top:

U
• Vertically aligns the data within the cell at the top.

tre
middle:

en
• Vertically aligns the data within the cell at the center.

bottom:
C
h
• Vertically aligns the data within the cell at the bottom.
ec

 To set the alignment with the style, you can use the text-align attribute to
pt

specify the vertical alignment use the following syntax:


rA

Syntax:
<td style= “text align: center; vertical align: middle”>
Fo

Aptech Web site </a>

© Aptech Ltd. Creating Tables / Session 9 19


y
The style can also be applied to individual rows, cells, or to the entire table.

nl
 The Code Snippet demonstrates how to align the data vertically within the table

O
using the style attribute.
<!DOCTYPE HTML>

se
<html>
<head>

U
<title>CelinaBatteries</title>

tre
</head>
<body>

en
<table border=”1”>
<tr>
<th>Sr.No.</th>
C
<th>Product Id</th>
h
<th>Product Description</th>
ec

</tr>
<tr>
pt

<td style=”text-align: center; vertical-align: middle”>1


rA

</td>
<td style=”text-align: center; vertical-align: middle”>P101
</td>
Fo

<td>1.5 Volts AA Ultra Alkaline</td>


</tr>
© Aptech Ltd. Creating Tables / Session 9 20
<tr>

y
nl
<td style=”text-align: center; vertical-align: middle”>2
</td>

O
<td style=”text-align: center; vertical-align: middle”>
M105

se
</td>

U
<td>9 Volts pp3 Super Alkaline</td>
</tr>

tre
</table>
</body>

en
</html>

 C
The text-align attribute is set to the value center, which specifies that the
h
data within the rows are centrally aligned.
ec

 The vertical-align is used to specify the vertical alignment in the table.


pt
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 21


 Following figure displays the vertical alignment.

y
nl
O
se
U
tre
en
C
h
ec
pt
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 22


y
 The data in a table might appear cluttered, which may affect the readability.

nl
 This might make it difficult to comprehend data as the data.

O
 To overcome this issue, use the cell margin attributes.
 Cell padding allows the user to control the look of the content on a page.

se
U
 Padding

tre
 Padding is the amount of space between the content and its outer edge.

en
 For tables, padding is referred as a space between the text and the cell border.
 Suppose, if the user wants to set the padding attribute for the individual cells
C
then padding attribute can be used in a style as follows:
h
ec
<td style=”padding: 4px”>
pt
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 23


 To specify the main heading for the table, use the <caption> element.

y
nl
 The <caption> element defines a caption for the table. It is a sub-element of

O
the <table> element.
 It must be present immediately after the <table> tag.

se
 The <caption> element allows the user to specify a title for your entire table.
 There can be only one caption for a table.

U
 The Code Snippet demonstrates how to specify a heading for a table.

tre
<!DOCTYPE HTML>
<html>

en
<head>
<title>Travel Expense Report</title>
</head>
<body> C
h
ec
<table border=”1”>
<caption>Travel Expense Report</caption>
pt

<tr>
<th>&nbsp;</th>
rA

<th>Meals</th>
<th>Hotels</th>
Fo

<th>Transport</th>
</tr>

© Aptech Ltd. Creating Tables / Session 9 24


<tr>

y
nl
<td>25-Apr</td>
<td>37.74</td>

O
<td>112.00</td>
<td>45.00</td>

se
</tr>

U
<tr>
<td>26-Apr</td>

tre
<td>27.28</td>
<td>112.00</td>

en
<td>45.00</td>
</tr>
<tr>
C
<td>Totals</td>
h
<td>65.02</td>
ec

<td>224.00</td>
<td>90.00</td>
pt

</tr>
rA

</table>
</body>
Fo

</html>

© Aptech Ltd. Creating Tables / Session 9 25


 The code creates a table of border width of 1 pixel. The <caption> element

y
nl
that is used inside the <table> element specifies a caption to the entire table

O
as Travel Expense Report.

se
U
tre
en
C
h
ec
pt
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 26


y
 The table size can be expanded when the user wants to add rows and columns in

nl
the table.

O
 The user can use the <style> section to set the default width for the table to
100% of the browser window.

se
 To set the width of a column in pixels, one can use style attribute in the <td> tag.

U
 The Code Snippet demonstrates how to create a table with specific width for a
column.

tre
<!DOCTYPE HTML>
<html>

en
<head>
<title>Tables</title>
</head> C
h
ec
<body>
<h2>Table</h2>
pt

<table border=”1”>
rA

<tr>
<td style =”width: 200px”>Flowers</td>
Fo

<td style =”width: 80px”>Fruits</td>


</tr>

© Aptech Ltd. Creating Tables / Session 9 27


<tr>

y
nl
<td style =”width: 200px”>Vegetables</td>
<td style =”width: 80px”>Trees</td>

O
</tr>

se
</table>
</body>

U
</html>

tre
 The code creates a table of border width of 1 pixel.
 The <style> element is used to set table width to 100%.

en
 The width of the columns is set by using the style attribute.

C
Following figure displays the table size and column width.
h
ec
pt
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 28


y
To change the cells of a table to different height and width, colspan and rowspan

nl
attributes can be used.

O
Consider a scenario, where the user wants to merge a cell into adjacent cells to the
right-hand side.

se
 The colspan attribute can be used to specify the number of columns to
span.

U
 The rowspan attribute can be used to specify the number of rows.

tre
 The Code Snippet demonstrates creating a table having five columns and five rows,
but many of the cells span multiple columns or rows.

en
<!DOCTYPE HTML >
<html>
<head>
C
h
<title>Favorite Destination</title>
ec
</head>
<body>
pt

<h2>Report</h2>
<table border=”1” width=”100%” height=”100%”>
rA

<tr>
<td colspan=”2” rowspan=”2”>Results</td>
Fo

<td colspan=”3”>Range</td>
</tr>

© Aptech Ltd. Creating Tables / Session 9 29


y
<tr>

nl
<td>18 to 20</td>

O
<td>25 to 50</td>
<td>over 50</td>

se
</tr>
<tr>

U
<td rowspan=”3”>Your favorite vacation destination</td>

tre
<td>Dubai</td>
<td>25%</td>

en
<td>50%</td>
<td>25%</td>
</tr>
<tr> C
h
<td>Bangkok</td>
ec

<td>40%</td>
<td>30%</td>
pt

<td>30%</td>
rA

</tr>
Fo

© Aptech Ltd. Creating Tables / Session 9 30


<tr>

y
<td>Switzerland</td>

nl
<td>30%</td>

O
<td>20%</td>
<td>50%</td>

se
</tr>
</table>

U
</body>
</html>

tre
 The code creates a table having a border of 1 pixel, table with five columns and five

en
rows, and uses the colspan and rowspan attributes respectively.
 Following figure displays the merging table cells.
C
h
ec
pt
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 31


y
CSS can be used for applying borders as it is the best reliable and flexible method.

nl
 One can format the table by using style based border for <table> and <td> tags.

O
To evaluate the attributes used are as follows:

se
border-width:

U
• Used to control the thickness of the border and the values are
specified in pixels.

tre
border-color:

en
• Used to control the color of the border and specifies the color by

C
either name, or RGB value, or hexadecimal number.
h
border-style:
ec

• Used to control the line style. Users can choose between solid,
pt

dashed, groove, dotted, outset, ridge, inset, or none.


rA
Fo

© Aptech Ltd. Creating Tables / Session 9 32


y
nl
O
To set all these attributes at one time, the user can use the border attribute and

se
place the settings in the order of width, color, and style respectively.

U
tre
To format the sides of the border individually, replace the border attribute with
border-bottom, border-top, border-right, or border-left attribute.

en
C
The user can apply these attributes to the entire table or individual cells and also
create rules in the <style> area.
h
ec
pt
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 33


 Tables are used for structuring the content and to organize the data in an

y
nl
appropriate manner.
 Tables allow the user to arrange the data horizontally or vertically according to the

O
requirement.

se
 Each and every Web site has a unique way of presenting data to their customers or
users.

U
 Many Web sites use pop-ups for providing information to their customers.

tre
 The Code Snippet demonstrates a simple example of using table for structuring the
content of a Web page.

en
<!DOCTYPE HTML>
<html>
C
h
<head>
ec
<title>Page Layout </title>
</head>
pt

<style>
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 34


#navlayout {

y
nl
width: 100%;
float: left;

O
margin: 0 0 3em 0;
padding: 0;

se
list-style: none;

U
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;

tre
border-top: 1px solid #ccc; }
#navlayout li {

en
float: left; }
#navlayout li a {
display: block;
C
padding: 8px 15px;
h
text-decoration: none;
ec

font-weight: bold;
color: #069;
pt

border-right: 1px solid #ccc; }


rA

#navlayout li a:hover {
color: #c00;
Fo

background-color: #fff; }
</style>

© Aptech Ltd. Creating Tables / Session 9 35


y
nl
<body>
<img src=”../Images/flowers.jpg” width=”133”

O
height=”100” alt=””

se
border=”0”>
<h1>Blossoms Gallery</h1>

U
<h5><i>The Best sellers for flowers since 1979</i></h5>
<navlayout>

tre
<hr>
<ul id=”navlayout”>

en
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Contact Us</a></li>

C
<li><a href=”#”>About Us</a></li>
<li><a href=”#”> FAQs</a></li>
h
</ul>
ec

</navlayout>
pt
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 36


<table>

y
<tr>

nl
<td>

O
<b>Flowers are now in stock! </b>
<i> We have just received a large shipment of flowers

se
with prices as low as $19.
</i>

U
</td>
</tr>

tre
</table>
</body>

en
</html>


C
The code creates a page layout for a Web site. The data is arranged in a tabular
h
ec
format and an embedded style is used for defining the style.
 The style is defined using the style element placed immediately after the
pt

<head> section.
rA

 Defining a style in this manner helps to reuse the style in the same Web page.
Fo

© Aptech Ltd. Creating Tables / Session 9 37


 The style is set using the ID selector methodology and is identified as navlayout.

y
nl
 This will enable to apply the style to the content of all those elements whose id
attribute has been set to navlayout.

O
 Following figure displays the example of a page layout for using tables.

se
U
tre
en
C
h
ec
pt
rA
Fo

© Aptech Ltd. Creating Tables / Session 9 38


y
Tables allow the user to view your data in a structured and classified format.

nl
O
 Padding is the amount of space between the content and its outer edge.

se
 The caption element defines a caption for a table. It is a sub-element of the
<table> element.

U
tre
 Spanning refers to a process of extending a cell across multiple rows or
columns.

en
 The rowspan attribute spans a data cell across two or more rows.
C
h
 The colspan attribute allows the user to specify the number of columns a cell
ec

should span.
pt

 The border attribute of the table element allows the user to specify a border
rA

for making the table visible in a Web page.


Fo

 Tables allow the user to organize the data. It enables the developer to design a
Web page having an attractive page layout.
© Aptech Ltd. Creating Tables / Session 9 39

You might also like