Scribd
Upload
19 views55 pages

Eaf 1 de 2

Uploaded by

panditnaman247
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
19 views55 pages

Eaf 1 de 2

Uploaded by

panditnaman247
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/ 55

LESSON 4

TABLES IN HTML
TABLES
Tables arrange data in rows and columns and provide an attractive
way to represent information.

Tables allow the users to organize data like text, images and links
etc.

Tables are helpful in many ways, as they:


• Present information or data in a comprehensive manner.
• Make a comparative analysis of data
• Display information that is easier to read and quicker to evaluate.
There are specific terms which describes a table:

1. Caption: The caption gives a description of the table.

2. Rows : These are the horizontal lines of data.

3. Columns: These are vertical lines of data.

4. Cell: It is the intersection of a column and a row.

5. Headings: These are the individual cells, which act as labels


depicting the type of information in each column.
Creating Table in html
TAG DESCRIPTION

<table> …. </table> To create the structure of a table. Each table begins with a <table> tag
and ends with the </table> tag.
<th>..</th> It gives a column heading in a table. It makes the text bold and place the
headings into center of the cell.
<tr>..</tr> It is used to create rows. Each row in table begins with the <tr> and ends
with the </tr>. Rows must be defined inside the table tag.
<td>..</td> The columns contain cells which stores data. It can contain HTML element
such as text, images, lists, other tables. <td> tag must always be present
inside the <tr> tag
<caption>..</caption> <caption> tag is used inside the <table> tag and must be inserted
immediatately after the <table> tag.
A table should have only one caption.
Example
<html>
<body>
<h2>This table has no borders:</h2>

<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>
<html>
<body>
<table>
<caption> Class X </caption>
<tr>
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr>
<td>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr>

</table>
</body> </html>
ATTRIBUTES OF TABLE TAG
1. BORDER
This attribute draws a border around the table.
Border attribute specifies the width of the border of a
table.
If the border attribute is not specified with a table or
if its value is zero, then no border will be displayed.
The larger the value, the thicker will be the border.
◦ Syntax: <table border = “value”>

Here the value is the border size in pixels.

If the border attribute is not specified with a table or if its


value is zero, then no border will be displayed.
The default size of a table is one pixel, if you do not specify
a value. So using <table border> yields the same result as
<table border = “1”>

The border size applies only to the outer table border. The
inner cells will have a cell border that is always only one
pixel thick.
<html>
<body>
<table border>

<caption> Class X </caption>


<tr>
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr>
<td>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr>

</table> </body> </html>


<html>
<body>
<table border = 1>

<caption> Class X </caption>


<tr>
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr>
<td>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr>

</table> </body> </html>


<html>
<body>
<table border = 15>

<caption> Class X </caption>


<tr>
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr>
<td>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr>

</table> </body> </html>


2. BORDERCOLOR
It specifies the color of the border either by specifying
the color code or color name.

Syntax: <table bordercolor=“color name/color


code”>
<html>
<body>
<table border = 15>

<caption> Class X </caption>


<tr>
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr>
<td>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr>

</table> </body> </html>


<html>
<body>
<table border = 15 bordercolor = "blue">

<caption> Class X </caption>


<tr>
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr>
<td>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr>

</table> </body> </html>


◦ 3. BGCOLOR

It sets background color to the table.

It can accept a hexadecimal, RGB or predefined color


value.

◦ Syntax: <table bgcolor=“color code/color name”>


<html>
<body>
<table border = 15 bordercolor = "blue"
bgcolor="pink">

<caption> Class X </caption>


<tr>
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr>
<td>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr>

</table> </body> </html>


◦ 4. CELLPADDING

It sets a margin within a cell. Or it specifies the space


between the edge of the cell & the cell content .

The value is given in pixels.

The default value is 2 pixels

◦ Syntax: <table cellpadding = “value”>


<html>
<body>
<table border = 15 bordercolor = "blue"
bgcolor="pink" cellpadding = 20>

<caption> Class X </caption>


<tr>
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr>
<td>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr>

</table> </body> </html>


◦ 5. CELLSPACING

It sets a minimum distance between two adjacent


cells. In other words, it specifies the spaces between
the cells that is the width of the cell border.

The value is given in pixels. Default value is 2 pixels.

◦ Syntax: <table cellspacing = “value”>


<html>
<body>
<table border = 15 bordercolor = "blue"
bgcolor="pink" cellpadding = 20 cellspacing=25>

<caption> Class X </caption>


<tr>
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr>
<td>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr>

</table> </body> </html>


◦ 6. ALIGN

It sets the alignment of a table.

The alignment can be set to left, right or center.

By default, a table is left aligned.

◦ Syntax: <table align= “left|right|center” >


<html>
<body>
<table border = 15 bordercolor = "blue"
bgcolor="pink" cellpadding = 20 cellspacing=25
align=center>

<caption> Class X </caption>


<tr>
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr>
<td>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr> </table> </body> </html>
<html>
<body>
<table border = 15 bordercolor = "blue"
bgcolor="pink" cellpadding = 20 cellspacing=25
align=right>

<caption> Class X </caption>


<tr>
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr>
<td>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr></table> </body> </html>
<html>
<body>
<table border = 15 bordercolor = "blue"
bgcolor="pink" cellpadding = 20 cellspacing=25
align=left>

<caption> Class X </caption>


<tr>
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr>
<td>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr></table> </body> </html>
◦ 6. HEIGHT AND WIDTH
By default, the size of the table is as large as the data
entered into it.
We can change the overall height and width of the table to
get the desired size.
The value of height and width is specified in terms of
absolute pixels or in terms of a relative percentage of the
screen size.

◦ Syntax & example: <table height = 400 width = 60%>


<html>
<body>
<table border = 15 bordercolor = "blue"
bgcolor="pink" cellpadding = 20 cellspacing=25
align=center height=400 width=60%>
<caption> Class X </caption>
<tr>
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr>
<td>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr></table> </body> </html>
<html>
<body>
<table border = 15 bordercolor = "blue"
bgcolor="pink" cellpadding = 20 cellspacing=25
align=center>
<caption> Class X </caption>
<tr>
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr>
<td>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr></table> </body> </html>
ATTRIBUTES OF <TR> <TD><TH>TAGS
1. BORDERCOLOR AND BGCOLOR
Border color and background colour can be set for the
cells of any specific row or column using bordercolor and
bgcolor attributes of <TR> or <TD> tags.
In the same row, we can give different colours to every
cells by specifying different colour names or colour codes,
using <TD> and <TH> tag. In this case , the color
attribute of <TR> tag does not show any effect.
<html>
<body>
<table border = 15 bordercolor = "blue"
bgcolor="pink" cellpadding = 20 cellspacing=25
align=center rules="all">
<caption> Class X </caption>
<tr bgcolor="yellow" bordercolor="green">
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr bgcolor="blue" bordercolor="red">
<td>1 </td>
<td bgcolor="green"
bordercolor="white">Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr></table> </body> </html>
Horizontal Alignment : align attribute
It aligns the text within the cell either to the left, right
or center.

Default alignment of the content is left and vertically


centered.

To change the alignment of the cells, it has to be


done individually for each cell.
<tr align=“left”> : aligns the content of all the cells in
a row to the left side (default)

<tr align=“right”> : aligns the content to the right side.

<tr align=“center”>: aligns the content to the center.

Note: Similarly, you can change the alignment of


each cell by using <td> tag.
<html>
<body>
<table border = 15 bordercolor = "blue"
bgcolor="pink" cellpadding = 20 cellspacing=25
align=center rules="all" height=300 width=400>
<caption> Class X </caption>
<tr bgcolor="yellow" bordercolor="green"
align="center">
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr bgcolor="blue" bordercolor="red">
<td>1 </td>
<td bgcolor="green"
bordercolor="white">Manya</td>
<td align="right"> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr></table> </body> </html>
Align-vertical Alignment
It aligns the text within the cell vertically.

The data can be aligned to top, middle and bottom


with a cell.
<tr valign=“top”> : aligns the content to the top of a
cell.

<tr valign=“bottom”> : aligns the content to the


bottom of a cell.

<tr valign=“middle”> : aligns the content to the


middle of a cell. (default)
<html>
<body>
<table border = 15 bordercolor = "blue"
bgcolor="pink" cellpadding = 20 cellspacing=25
align=center rules="all" height=300 width=400>
<caption> Class X </caption>
<tr bgcolor="yellow" align="center">
<th> Roll No </th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr bgcolor="blue">
<td>1 </td>
<td bgcolor="green" valign="top">Manya</td>
<td align="right"> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr></table> </body> </html>
SPANNING
Spanning is combining two or more cells either
column wise or row wise to convert them into a single
cell.

It is useful for displaying heading and titles in


consecutive rows or columns.
COLSPAN
COLSPAN is used to combine the cells horizontally.
It specifies the number of columns that the cells span
across and shows them as a single cell.
Example: <td colspan=4>
Here 4 is the number of columns that the cells span
across.
ROWSPAN
ROWSPAN is used to combine the cells vertically.

It merges the number of cells vertically and display


them as a single cell.

Example: <td rowspan=3>

Here 3 is the number of rows that the cells span across.


<html>
<body>
<table border = 15 bordercolor = "blue"
bgcolor="pink" cellpadding = 20 cellspacing=25
align=center rules="all" height=300 width=400>
<caption> Class X </caption>
<tr bgcolor="yellow">
<th colspan="3"> List of Players</th>
<th> Name</th>
<th> Hobbies </th>
</tr>
<tr>
<td>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr></table> </body> </html>
<html>
<body>
<table border = 15 bordercolor = "blue"
bgcolor="pink" cellpadding = 20 cellspacing=25
align=center rules="all" height=300 width=400>
<caption> Class X </caption>

<tr bgcolor="yellow">
<th colspan="3"> List of Players</th>
</tr>

<tr>
<td>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr></table> </body> </html>
<html>
<body>
<table border = 15 bordercolor = "blue"
bgcolor="pink" cellpadding = 20 cellspacing=25
align=center rules="all" height=300 width=400>
<caption> Class X </caption>
<tr bgcolor="yellow">
<th colspan="3"> List of Players</th>
</tr>
<tr>
<td rowspan=2>1 </td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>
<td>2</td>
<td>Aryaman </td>
<td>Cricket </td>
</tr></table> </body> </html>
<html>
<body>
<table border = 15 bordercolor = "blue"
bgcolor="pink" cellpadding = 20 cellspacing=25
align=center rules="all" height=300 width=400>
<caption> Class X </caption>
<tr bgcolor="yellow">
<th colspan="3"> List of Players</th>
</tr>
<tr>
<td rowspan=2>Details</td>
<td>Manya</td>
<td> Football </td>
</tr>
<tr>

<td>Aryaman </td>
<td>Cricket </td>
</tr></table> </body> </html>
<THEAD> Tag
<THEAD> tag is used to group header and rows that define the
table’s header.
This tag should appear inside the <table> tag.
It is useful in case of large tables that span across multiple pages in
a document.
The table header defined by the <THEAD> tag will appear on each
page of the document where the table is displayed.
There can only be one <THEAD> element in a table which must
follow the main table command.
<html>
<body>
<table border = 15 bordercolor = "blue" bgcolor="pink"
cellpadding = 20 cellspacing=25 align=center>
<caption> Class X </caption>
<thead bgcolor="lightgreen"
<tr> <th> Roll No </th> <th> Name</th> <th> Hobbies
</th>
</tr> </thead>
<tr>
<td>1 </td> <td>Manya</td><td> Football </td>
</tr>
<tr> <td>2</td><td>Aryaman </td><td>Cricket </td>
</tr>
<tr><td>3 </td><td>Bhoomi</td><td> Football </td>
</tr><tr>
<td>4 </td><td>Avni</td><td> Football </td>
</tr>
</table> </body> </html>
We can specify the desired settings to multiple table
headers rows through various attributes defined in
<THEAD> tag.

The common attributes used with the <THEAD> tag


are:

1. Align: sets the horizontal alignment of cells in the


header.
2. Valign: sets the vertical alignment of cells in the
header.

3. Bgcolor: sets the background color of the cells in the


header.
<TFOOT> Tag
<TFOOT> defines a group of footer rows in a table
A table footer provides footnotes or a summary row that
appears at the bottom of a table.
A table can have only one <TFOOT> tag, which must appear
after the <THEAD> and <TBODY> tags.
The rows defined in a table footer with <TFOOT> are also
replicated like <THEAD> tag in multiple pages in case of large
tables.
It has the same attributes as that of <THEAD> tag.
<html>
<body>
<table border = 15 bordercolor = "blue" bgcolor="pink"
cellpadding = 20 cellspacing=25 align=center>
<caption> Class X </caption>
<thead bgcolor="lightgreen"
<tr>
<th> Roll No </th><th> Name</th><th> Hobbies </th>
</tr> </thead>
<tr>
<td>1 </td><td>Manya</td><td> Football </td>
</tr>
<tr>
<td>2</td><td>Aryaman </td><td>Cricket </td>
</tr>
<tr>
<td>3 </td><td>Bhoomi</td><td> Football </td>
</tr>
<tfoot bgcolor="yellow">
<tr>
<td>footer </td><td>footer</td><td> footer </td>
</tr></tfoot>
</table> </body> </html>
<TBODY> Tag
<TBODY> tag defines a table’s body.

It allows you to group a block of table rows in html table.

If we use the <TBODY> tag, it must be used as a child of a


<table> element and the parent of <TR>&<TD> tags.

It may contain zero or more <TR> tags.

<TBODY> tag must appear after the <THEAD> tag.

A table can have one or more <TBODY> elements.

It has similar attributes as of <THEAD> & <TFOOT> tags.


<html>
<body>
<table border = 15 bordercolor = "blue" bgcolor="pink" cellpadding
= 20 cellspacing=25 align=center>
<caption> Class X </caption>
<thead bgcolor="lightgreen"
<tr>
<th> Roll No </th><th> Name</th><th> Hobbies </th>
</tr> </thead>
<tbody bgcolor="orange">
<tr>
<td>1 </td><td>Manya</td><td> Football </td>
</tr>
<tr>
<td>2</td><td>Aryaman </td><td>Cricket </td>
</tr>
<tr>
<td>3 </td><td>Bhoomi</td><td> Football </td>
</tr>
<tfoot bgcolor="yellow">
</tbody>
<tr>
<td>footer </td><td>footer</td><td> footer </td>
</tr></tfoot>
</table> </body> </html>
NOTE:

<THEAD><TBODY> and <TFOOT> tags are used to divide a

table into different sections.

All these three tags are useful for large tables where these tags

allow the browsers to scroll through the table body section while

fixing the position of header and footer sections.

You might also like