B4. Creating Tables
Uploaded by
Huỳnh Tôn Minh QuânB4. Creating Tables
Uploaded by
Huỳnh Tôn Minh QuânSession: 9
Creating Tables
Describe
how
to
create
and
format
tables
Explain
the
table
size
and
the
width
of
a
column
Explain
the
process
of
merging
table
cells
Explain
the
page
layout
for
tables
© Aptech Ltd. Crea(ng Tables / Session 9 2
A table is made up of rows and columns. The intersection of each row and column is
called as a cell.
A row is made up of a set of cells that are placed horizontally.
A column is made up of set of cells that are placed vertically.
The user can represent the data in a tabular format by using the <table> element in
HTML.
The <tr> element divides the table into rows and the <td> element specifies columns
for each row.
By default, a table does not have a border.
The border attribute of the <table> element specifies a border for making the table
visible in a Web page.
© Aptech Ltd. Crea(ng Tables / Session 9 3
The Code Snippet demonstrates how to create a table.
<!DOCTYPE HTML>
<html>
<head>
<title>Languages</title>
</head>
<body>
<h2>Main Languages</h2>
<table border=”1”>
<tr>
<td>English</td>
<td>German</td>
</tr>
<tr>
<td>French</td>
<td>Italian</td>
</tr>
</table>
</body>
</html>
© Aptech Ltd. Crea(ng Tables / Session 9 4
The code uses the <table> element to create a table.
The border aHribute of <table> element gives a border to the table, which is 1
pixel wide.
The <tr> element within the <table> element creates rows.
The <td> element creates two cells with the values English and German in the
first row and French and Italian in the second row.
Following figure displays the table created.
© Aptech Ltd. Crea(ng Tables / Session 9 5
The user can specify the heading for each column in HTML.
To specify the heading for columns in a table, use the <th> element.
The text included within the <th> element appears in bold.
The Code Snippet demonstrates how to create a table with a heading.
<!DOCTYPE HTML>
<html>
<head>
<title>List of Students </title>
</head>
<body>
<h2>List of Students</h2>
<table border=”1”>
<tr>
<th>Name</th>
<th>Age</th>
<th>Place</th>
</tr>
© Aptech Ltd. Crea(ng Tables / Session 9 6
<tr>
<td>Mark</td>
<td>17</td>
<td>Madrid</td>
</tr>
<tr>
<td>John</td>
<td>19</td>
<td>London</td>
</tr>
</table>
</body>
</html>
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
Place.
© Aptech Ltd. Crea(ng Tables / Session 9 7
The second and the third row lists the details of the students in the three
columns.
Following figure displays the output of the table with headings.
© Aptech Ltd. Crea(ng Tables / Session 9 8
Spanning refers to a process of extending a cell across mul(ple rows or columns.
To span two or more columns, use the colspan aHribute of the <td> and <th>
elements.
The colspan aHribute allows the user to span a cell along a horizontal row.
The value of the colspan aHribute specifies the number of cells across which a
specific cell shall be expanded.
The
Code
Snippet
demonstrates
how
to
create
a
table
and
span
header
cells
across
two
cells
ver(cally.
<!DOCTYPE HTML>
<html>
<head>
<title>Employee Details</title>
</head>
<body>
<h2>Employee Details</h2>
<table border=”1”>
© Aptech Ltd. Crea(ng Tables / Session 9 9
<tr>
<th colspan=”2”>IT</th>
<th colspan=”2”>Accounts</th>
</tr>
<tr>
<th>Name</th>
<th>Location</th>
<th>Name</th>
<th>Location</th>
</tr>
<tr>
<td>David</td>
<td>New York</td>
<td>John</td>
<td>London</td>
</tr>
© Aptech Ltd. Crea(ng Tables / Session 9 10
<tr>
<td>Katthy</td>
<td>New Jersey</td>
<td>Peter</td>
<td>Los Angeles</td>
</tr>
</table>
</body>
</html>
The code creates a table with a border of 1 pixel.
The <th> element specifies two column headings namely, IT and Accounts.
Each of these header cells horizontally span across the two cells by seWng the
colspan aHribute of the <th> element to 2.
Each of these headings has two sub-‐headings namely, Name and Loca2on, which
specify the name and loca(on of employees.
The first and second rows display the details of the employees.
© Aptech Ltd. Crea(ng Tables / Session 9 11
The rowspan aHribute spans a data cell across two or more rows.
It allows the user to span a data cell along a ver(cal column.
Like the colspan aHribute, the rowspan aHribute can be used within the <td>
and <th> elements.
The Code Snippet demonstrates how to span a cell across mul(ple rows.
<!DOCTYPE HTML>
<html>
<head>
<title>Automobile Gallery</title>
</head>
<body>
<table border=”1”>
<tr>
<th>Manufacturer</th>
<th>Model</th>
<th>Price</th>
</tr>
<tr>
<th rowspan=”3”>Audi</th>
<td>A4</td>
<td>34.5</td>
</tr>
© Aptech Ltd. Crea(ng Tables / Session 9 12
<tr>
<td>A5</td>
<td>42.6</td>
</tr>
<tr>
<td>A6</td>
<td>30.75</td>
</tr>
<tr>
<th rowspan=”2”>BMW</th>
<td>328i</td>
<td>28.25</td>
</tr>
<tr>
<td>530d</td>
<td>47.5</td>
</tr>
</table>
</body>
</html>
The code creates a table with a border width of 1 pixel.
© Aptech Ltd. Crea(ng Tables / Session 9 13
The three <th> elements within the <tr> element specify column headings
namely, Manufacturer, Model, and Price.
The rowspan aHribute of the <th> element combines the three rows of the
Manufacturer column into a common brand namely, Audi.
The three different models and the respec(ve prices of the Audi brand are
displayed in three different rows.
Similarly, the rowspan aHribute of the <th> element combines the next two rows
of the Manufacturer column into a common brand called BMW.
Following figure displays the rowspan aHribute effect.
© Aptech Ltd. Crea(ng Tables / Session 9 14
Alignment determines the representa(on of text along the le\, right, or center
posi(ons.
In HTML, by default, the data within the table is aligned on the le\ side of the
cell.
HTML5 has deprecated the align aHribute.
The four possible values for seWng the horizontal alignment are as follows:
left:
• Aligns the data within a cell on the left side. This is the default value for
table content.
center:
• Aligns the data within the cell on the center. This is the default value for
table headings.
right:
• Aligns the data within the cell on the right side.
justify:
• Aligns the data within the cell by adjusting the text at the edges.
© Aptech Ltd. Crea(ng Tables / Session 9 15
To set the alignment with style you can use the text-‐align aHribute to specify the
horizontal alignment.
The Code Snippet demonstrates how to center align the table data.
<!DOCTYPE HTML>
<html>
<head>
<title>Automobile Gallery</title>
</head>
<body>
<table border=”1”>
<tr>
<th>Sr.No.</th>
<th>Medicine Name</th>
<th>Price</th>
</tr>
<tr style=”text-align: center;”>
<td>1</td>
<td>Captopril</td>
<td>12.45</td>
</tr>
© Aptech Ltd. Crea(ng Tables / Session 9 16
<tr style=”text-align: center;”>
<td>2</td>
<td>Ceftriaxone</td>
<td>6.94</td>
</tr>
<tr style=”text-align: center;”>
<td>3</td>
<td>Ciprofloxacin</td>
<td>56.21</td>
</tr>
</table>
</body>
</html>
The
code
aligns
the
data
within
the
row
using
a
style
within
the
<tr>
element.
The
table
content
is
center
aligned
by
seWng
the
value
of
the
text-align
aHribute
to
center.
© Aptech Ltd. Crea(ng Tables / Session 9 17
Following figure displays the horizontal alignment.
© Aptech Ltd. Crea(ng Tables / Session 9 18
Users can ver(cally align the posi(on of data earlier by using the valign
aHribute.
HTML5 has deprecated the valign aHribute.
The possible values of ver(cal alignment are as follows:
top:
• Vertically aligns the data within the cell at the top.
middle:
• Vertically aligns the data within the cell at the center.
bottom:
• Vertically aligns the data within the cell at the bottom.
To
set
the
alignment
with
the
style,
you
can
use
the
text-align
aHribute
to
specify
the
ver(cal
alignment
use
the
following
syntax:
Syntax:
<td style= “text align: center; vertical align: middle”>
Aptech Web site </a>
© Aptech Ltd. Crea(ng Tables / Session 9 19
The style can also be applied to individual rows, cells, or to the en(re table.
The Code Snippet demonstrates how to align the data ver(cally within the table
using the style aHribute.
<!DOCTYPE HTML>
<html>
<head>
<title>CelinaBatteries</title>
</head>
<body>
<table border=”1”>
<tr>
<th>Sr.No.</th>
<th>Product Id</th>
<th>Product Description</th>
</tr>
<tr>
<td style=”text-align: center; vertical-align: middle”>1
</td>
<td style=”text-align: center; vertical-align: middle”>P101
</td>
<td>1.5 Volts AA Ultra Alkaline</td>
</tr>
© Aptech Ltd. Crea(ng Tables / Session 9 20
<tr>
<td style=”text-align: center; vertical-align: middle”>2
</td>
<td style=”text-align: center; vertical-align: middle”>
M105
</td>
<td>9 Volts pp3 Super Alkaline</td>
</tr>
</table>
</body>
</html>
The
text-align
aHribute
is
set
to
the
value
center,
which
specifies
that
the
data
within
the
rows
are
centrally
aligned.
The
vertical-align
is
used
to
specify
the
ver(cal
alignment
in
the
table.
© Aptech Ltd. Crea(ng Tables / Session 9 21
Following figure displays the ver(cal alignment.
© Aptech Ltd. Crea(ng Tables / Session 9 22
The data in a table might appear cluHered, which may affect the readability.
This might make it difficult to comprehend data as the data.
To overcome this issue, use the cell margin aHributes.
Cell padding allows the user to control the look of the content on a page.
Ø Padding
Padding
is
the
amount
of
space
between
the
content
and
its
outer
edge.
For
tables,
padding
is
referred
as
a
space
between
the
text
and
the
cell
border.
Suppose,
if
the
user
wants
to
set
the
padding
aHribute
for
the
individual
cells
then
padding
aHribute
can
be
used
in
a
style
as
follows:
<td style=”padding: 4px”>
© Aptech Ltd. Crea(ng Tables / Session 9 23
To specify the main heading for the table, use the <caption> element.
The <caption> element defines a cap(on for the table. It is a sub-‐element of
the <table> element.
It must be present immediately a\er the <table> tag.
The <caption> element allows the user to specify a (tle for your en(re table.
There can be only one cap(on for a table.
The Code Snippet demonstrates how to specify a heading for a table.
<!DOCTYPE HTML>
<html>
<head>
<title>Travel Expense Report</title>
</head>
<body>
<table border=”1”>
<caption>Travel Expense Report</caption>
<tr>
<th> </th>
<th>Meals</th>
<th>Hotels</th>
<th>Transport</th>
</tr>
© Aptech Ltd. Crea(ng Tables / Session 9 24
<tr>
<td>25-Apr</td>
<td>37.74</td>
<td>112.00</td>
<td>45.00</td>
</tr>
<tr>
<td>26-Apr</td>
<td>27.28</td>
<td>112.00</td>
<td>45.00</td>
</tr>
<tr>
<td>Totals</td>
<td>65.02</td>
<td>224.00</td>
<td>90.00</td>
</tr>
</table>
</body>
</html>
© Aptech Ltd. Crea(ng Tables / Session 9 25
The code creates a table of border width of 1 pixel. The <caption> element
that is used inside the <table> element specifies a cap(on to the en(re table
as Travel Expense Report.
© Aptech Ltd. Crea(ng Tables / Session 9 26
The table size can be expanded when the user wants to add rows and columns in
the table.
The user can use the <style> sec(on to set the default width for the table to
100% of the browser window.
To set the width of a column in pixels, one can use style aHribute in the <td> tag.
The Code Snippet demonstrates how to create a table with specific width for a
column.
<!DOCTYPE HTML>
<html>
<head>
<title>Tables</title>
</head>
<body>
<h2>Table</h2>
<table border=”1”>
<tr>
<td style =”width: 200px”>Flowers</td>
<td style =”width: 80px”>Fruits</td>
</tr>
© Aptech Ltd. Crea(ng Tables / Session 9 27
<tr>
<td style =”width: 200px”>Vegetables</td>
<td style =”width: 80px”>Trees</td>
</tr>
</table>
</body>
</html>
The code creates a table of border width of 1 pixel.
The <style> element is used to set table width to 100%.
The width of the columns is set by using the style aHribute.
Following figure displays the table size and column width.
© Aptech Ltd. Crea(ng Tables / Session 9 28
To change the cells of a table to different height and width, colspan and rowspan
aHributes can be used.
Consider a scenario, where the user wants to merge a cell into adjacent cells to the
right-‐hand side.
The colspan aHribute can be used to specify the number of columns to
span.
The rowspan aHribute can be used to specify the number of rows.
The Code Snippet demonstrates crea(ng a table having five columns and five rows,
but many of the cells span mul(ple columns or rows.
<!DOCTYPE HTML >
<html>
<head>
<title>Favorite Destination</title>
</head>
<body>
<h2>Report</h2>
<table border=”1” width=”100%” height=”100%”>
<tr>
<td colspan=”2” rowspan=”2”>Results</td>
<td colspan=”3”>Range</td>
</tr>
© Aptech Ltd. Crea(ng Tables / Session 9 29
<tr>
<td>18 to 20</td>
<td>25 to 50</td>
<td>over 50</td>
</tr>
<tr>
<td rowspan=”3”>Your favorite vacation destination</td>
<td>Dubai</td>
<td>25%</td>
<td>50%</td>
<td>25%</td>
</tr>
<tr>
<td>Bangkok</td>
<td>40%</td>
<td>30%</td>
<td>30%</td>
</tr>
© Aptech Ltd. Crea(ng Tables / Session 9 30
<tr>
<td>Switzerland</td>
<td>30%</td>
<td>20%</td>
<td>50%</td>
</tr>
</table>
</body>
</html>
The
code
creates
a
table
having
a
border
of
1
pixel,
table
with
five
columns
and
five
rows,
and
uses
the
colspan
and
rowspan
aHributes
respec(vely.
Following
figure
displays
the
merging
table
cells.
© Aptech Ltd. Crea(ng Tables / Session 9 31
CSS can be used for applying borders as it is the best reliable and flexible method.
One can format the table by using style based border for <table> and <td> tags.
To evaluate the aHributes used are as follows:
border-width:
• Used to control the thickness of the border and the values are specified in
pixels.
border-color:
• Used to control the color of the border and specifies the color by either
name, or RGB value, or hexadecimal number.
border-style:
• Used to control the line style. Users can choose between solid, dashed,
groove, dotted, outset, ridge, inset, or none.
© Aptech Ltd. Crea(ng Tables / Session 9 32
To set all these attributes at one time, the user can use the border attribute and place the
settings in the order of width, color, and style respectively.
To format the sides of the border individually, replace the border attribute with border-
bottom, border-top, border-right, or border-left attribute.
The user can apply these attributes to the entire table or individual cells and also create
rules in the <style> area.
© Aptech Ltd. Crea(ng Tables / Session 9 33
Tables are used for structuring the content and to organize the data in an
appropriate manner.
Tables allow the user to arrange the data horizontally or ver(cally according to the
requirement.
Each and every Web site has a unique way of presen(ng data to their customers or
users.
Many Web sites use pop-‐ups for providing informa(on to their customers.
The Code Snippet demonstrates a simple example of using table for structuring the
content of a Web page.
<!DOCTYPE HTML>
<html>
<head>
<title>Page Layout </title>
</head>
<style>
© Aptech Ltd. Crea(ng Tables / Session 9 34
#navlayout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#navlayout li {
float: left; }
#navlayout li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#navlayout li a:hover {
color: #c00;
background-color: #fff; }
</style>
© Aptech Ltd. Crea(ng Tables / Session 9 35
<body>
<img src=”../Images/flowers.jpg” width=”133”
height=”100” alt=””
border=”0”>
<h1>Blossoms Gallery</h1>
<h5><i>The Best sellers for flowers since 1979</i></h5>
<navlayout>
<hr>
<ul id=”navlayout”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Contact Us</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”> FAQs</a></li>
</ul>
</navlayout>
© Aptech Ltd. Crea(ng Tables / Session 9 36
<table>
<tr>
<td>
<b>Flowers are now in stock! </b>
<i> We have just received a large shipment of flowers
with prices as low as $19.
</i>
</td>
</tr>
</table>
</body>
</html>
The
code
creates
a
page
layout
for
a
Web
site.
The
data
is
arranged
in
a
tabular
format
and
an
embedded
style
is
used
for
defining
the
style.
The
style
is
defined
using
the
style
element
placed
immediately
a\er
the
<head>
sec(on.
Defining
a
style
in
this
manner
helps
to
reuse
the
style
in
the
same
Web
page.
© Aptech Ltd. Crea(ng Tables / Session 9 37
The style is set using the ID selector methodology and is iden(fied as navlayout.
This will enable to apply the style to the content of all those elements whose id
aHribute has been set to navlayout.
Following figure displays the example of a page layout for using tables.
© Aptech Ltd. Crea(ng Tables / Session 9 38
Tables allow the user to view your data in a structured and classified format.
Padding
is
the
amount
of
space
between
the
content
and
its
outer
edge.
The
cap(on
element
defines
a
cap(on
for
a
table.
It
is
a
sub-‐element
of
the
<table>
element.
Spanning
refers
to
a
process
of
extending
a
cell
across
mul(ple
rows
or
columns.
The
rowspan
aHribute
spans
a
data
cell
across
two
or
more
rows.
The
colspan
aHribute
allows
the
user
to
specify
the
number
of
columns
a
cell
should
span.
The
border
aHribute
of
the
table
element
allows
the
user
to
specify
a
border
for
making
the
table
visible
in
a
Web
page.
Tables
allow
the
user
to
organize
the
data.
It
enables
the
developer
to
design
a
Web
page
having
an
aHrac(ve
page
layout.
©
Aptech
Ltd.
Crea(ng
Tables
/
Session
9
39
You might also like
- Oracle SBC Configuration and Administration SBC ConceptsNo ratings yetOracle SBC Configuration and Administration SBC Concepts74 pages
- Palo Alto Networks Firewall 10.2 Troubleshooting EDU-330 Courseware Version A April 2022 - Lab100% (1)Palo Alto Networks Firewall 10.2 Troubleshooting EDU-330 Courseware Version A April 2022 - Lab258 pages
- CM65XX_EEPROM_Configuration_Tool_User_ManualNo ratings yetCM65XX_EEPROM_Configuration_Tool_User_Manual29 pages
- ZXMW PR10 S400&S500 (V2.01) Digital Microwave System Commissioning GuideNo ratings yetZXMW PR10 S400&S500 (V2.01) Digital Microwave System Commissioning Guide29 pages
- International Prepaid SIM Cards - Manana MobileNo ratings yetInternational Prepaid SIM Cards - Manana Mobile24 pages
- Cisco Identity Services Engine Ordering GuideNo ratings yetCisco Identity Services Engine Ordering Guide38 pages
- The Test Is Complete: Enlightks Ecdl/Icdl - Presentation 5.0 - Powerpoint 2007 - Diag. EngNo ratings yetThe Test Is Complete: Enlightks Ecdl/Icdl - Presentation 5.0 - Powerpoint 2007 - Diag. Eng8 pages
- Ab Initio Interview Questions and AnswersNo ratings yetAb Initio Interview Questions and Answers6 pages
- Give and Take: A Study of Consumer Photo-Sharing Culture and PracticeNo ratings yetGive and Take: A Study of Consumer Photo-Sharing Culture and Practice10 pages
- Differences Between HMI and IPC White Paper L003214ANo ratings yetDifferences Between HMI and IPC White Paper L003214A3 pages
- SIS - Request Form Installation Database (ISAT - Interconnect Billing System Project)No ratings yetSIS - Request Form Installation Database (ISAT - Interconnect Billing System Project)4 pages
- Usage of Artificial Intelligence in Online Shopping Application: Malaysian Customer Attitude 1.1 Research BackgroundNo ratings yetUsage of Artificial Intelligence in Online Shopping Application: Malaysian Customer Attitude 1.1 Research Background4 pages