Lesson 9:Tables
Tables are one of the fundamental elements using for
arranging and organizing data. html allows developer to arrage text, links,
images and other tables into the row-column format. The tag used for this
purpose is the <table> tag. Furthermore, rows can be created using
<tr> tag while columns can be created using <td> tag. It is
important to mention here that <td> elements are created under <tr>
and are left aligned, by default. The sample code provided below shows a
standard html table.
<!doctype html>
<html>
<head>
<title>tables demo</title>
</head>
<body>
<table border =
"1">
<tr>
<td>Row1, column1</td>
<td>Row1,
column2</td>
</tr>
<tr>
<td>Row2, column1</td>
<td>Row2, column2</td>
</tr>
</table>
</body> </html>
the webpage
corresponding to this code shall look like this –
As you can see in the code given above, the border attribute
is set to 1 and hence, a border is seen in the table thence created. If the border
value is set to 0, the table will have no border.
Heading
the <th> tag can
be used to give the table header. The tag shall appear in place of the
<td> cell tags. Although, html allows you to place the table header in any
row of the table, the placement of the same in the first row makes most sense.
The standard format of a heading defined using the <th> tag is center
aligned and bold. Sample code to illustrate how a table header can be defined
is provided below.
<!doctype html>
<html>
<head>
<title>table
header demo</title>
</head>
<body>
<table border = "1">
<tr>
<th>Employee name</th>
<th>Employee Salary</th>
</tr>
<tr>
<td> jacob </td> <td>20000</td>
</tr>
<tr>
<td>jack</td> <td>9000</td>
</tr>
</table>
</body>
</html>
The webpage corresponding to this code is shown below for
your reference.
Attributes for cell spacing and cell padding
The whitespace in your table can be adjusted using two
attributed namely, cell padding and cells pacing. The whitespace between the
border and table
or cell content is called cell padding. On the other hand,
the white space between different cells of the table is referred to s cell spacing.
The sample code given below illustrates how these two attributes can be adjusted
for better aesthetics and readability.
<!doctype html>
<html>
<head>
<title>cellpadding and cellspacing demo</title>
</head>
<body>
<table border =
"1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Employee name</th>
<th>Employee
Salary</th>
</tr>
<tr>
<td>jacob</td>
<td>20000</td>
</tr>
<tr>
<td>jack</td>
<td>9000</td>
</tr>
</table>
</body>
</html>
The webpage
corresponding to this code is shown below for your reference.
Rowspan and colspan
html also allows
programmers to merge columns and rows on their free will. Colspan is used for
merging columns while rowspan performs merger of rows. Sample code to
demonstrate how this concept works is provided below for your reference.
<!doctype html>
<html>
<head>
<title>html
table colspan/Rowspan demo</title>
</head>
<body>
<table border = "1">
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
<tr>
<td rowspan = "2">Row1 cell1</td>
<td>Row1 cell2</td>
<td>Row1 cell3</td>
</tr>
<tr>
<td>Row2
cell2</td>
<td>Row2 cell3</td>
</tr>
<tr>
<td colspan =
"3">Row3 cell1</td>
</tr>
</table>
</body>
</html>
The webpage
corresponding to this code is shown below for your reference
Setting background for tables
background can be set using two methods namely, by setting
the bgcolor attribute or using the background attribute. both these methods can
be used to set the background of the whole table or single cell of the table.
Lastly, the color of the border of the table can be set with the help of
bordercolor attribute. Sample code to demonstrate how background for tables can
be set is provided below.
<!doctype html>
<html>
<head>
<title>Set table background demo</title>
</head>
<body>
<table border =
"1" bordercolor = "green" bgcolor = "yellow">
<tr> <th>column1</th>
<th>column2</th> <th>column3</th> </tr>
<tr> <td
rowspan = "2">Row1 cell1</td> <td>Row1
cell2</td> <td>Row1 cell3</td> </tr>
<tr> <td>Row2 cell2</td> <td>Row2
cell3</td> </tr>
<tr> <td
colspan = "3">Row3 cell1</td> </tr>
</table>
</body>
</html>
The webpage
corresponding to this code is shown below for your reference
As mentioned previously, background attribute may also be
used to set the background of the table or a cell to an image. The sample code
provided below gives a demonstration of how you can do this. <!doctype
html>
<html>
<head>
<title>Setting table background demo</title>
</head>
<body>
<table border = "1" bordercolor =
"green" background = "/images/sample.png">
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
<tr> <td
rowspan = "2">Row1 cell1</td>
<td>Row1 cell2</td>
<td>Row1 cell3</td>
</tr>
<tr>
<td>Row2 cell2</td>
<td>Row2 cell3</td>
</tr>
<tr>
<td colspan = "3">Row3 cell1</td>
</tr>
</table>
</body>
</html>
Setting height and Width of tables
The width and height
attributes can be used for setting the cooresponding parameters. html allows
programmers to specify the desired height and width in terms of pixels or
percentage. Sample code to illustrate how this can be done is provided below
for your reference.
<!doctype html>
<html>
<head>
<title>demo
table Width/height</title>
</head>
<body>
<table border = "1" width = "400"
height ="150">
<tr>
<td>Row1, column1</td>
<td>Row1, column2</td>
</tr>
<tr> <td>Row2, column1</td>
<td>Row2,
column2</td>
</tr>
</table>
</body>
</html>
The webpage
corresponding to this code is shown below for your reference.
Caption
The table caption appears on top of the table and is a
description of the table. Although, this tag has been deprecated in newer
versions of xhtml and html, we have included it here for the same of comprehensiveness.
Sample code for setting the table caption is provided below.
<!doctype html>
<html>
<head>
<title>demo table caption</title>
</head>
<body>
<table border =
"1" width = "100%">
<caption>table
caption</caption>
<tr>
<td>row1,
column1</td>
<td>row1, column2</td>
</tr>
<tr>
<td>row2, column1</td>
<td>row2, column2</td>
</tr>
</table>
</body>
</html>
The webpage corresponding to this code is shown below for
your reference.
header, Footer and body of table
The division of a table into header, footer and body can be
related to the header, footer and body of word documents. While header and
footer include extra information about the document, the body has the main
content. The tags used for setting each of these are <thead>,
<tfoot> and <tbody>. The first two
Tags create a separate header and footer section of the
table. However, the last tag indicates the main table body.
Also Read:-
Lesson 7 comments
Lesson 6 Meta tags
Lesson 5 Phrase tags
Lesson 4 formatting
Lesson 3 attributes of HTML
Lesson 2 Basic tags
Lesson 1 overview of HTML
0 टिप्पणियाँ