Scribd
Upload
18 views

Lecture-7_Table_ (2)

Uploaded by

shivamsourav1406
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
18 views

Lecture-7_Table_ (2)

Uploaded by

shivamsourav1406
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/ 18

Lecture 7:

Tables in HTML
HTML Tables

• Tables are just like spreadsheets and they are made


up of rows and columns.
• You will create a table in HTML by using <table> tag.
• A table is divided into rows (with the <tr> tag), and
each row is divided into columns/data cells (with the
<td> tag).
• td stands for "table data," and holds the content of a
data cell.
• A <td> tag can contain text, links, images, lists, forms,
other tables, etc.
Example:- Row 1
<body>
<table >
<tr>
<td>Neeraj</td>
2 Columns
Output:-
<td>BCA</td>
</tr>

<tr>
<td>Archit</td>
<td>MCA</td>
</tr>

<tr>
<td>kartik</td>
<td>M.Tech</td>
</tr>
</table>
</body>
Tables Border Attribute
Example:-

<body>
<table border="1">
<tr>
<td>Neeraj</td>
<td>BCA</td>
</tr>
<tr>
<td>Archit</td>
<td>MCA</td>
</tr>
<tr>
<td>kartik</td>
<td>M.Tech</td>
</tr>
</table>
</body>
Table Heading - The
<th> Element:

• Table heading can be defined using <th> element.


• This tag will be put to replace <td> tag which is used to
represent actual data.
• Normally you will put your top row as table heading as shown
below, otherwise you can use <th> element at any place.
Example:-
<HTML>
<HEAD>
<title>Table with<border>& attributes<tr><td></title>
</HEAD>

<BODY>
<table border=5>
<caption><b> Admission 2009-2010</b></caption>
<tr><td>Computer Science <td>9 <td>18 <td>20 <td>20
<tr><td>Commerce <td>17 <td>18 <td>27 <td>24
<tr><td>Physics <td>9 <td>18 <td>20 <td>20
<tr><td>Chemisrty <td>17 <td>18 <td>27 <td>&nbsp

</table>
</BODY>
</HTML>
Table Cellpadding and Cellspacing Attribute
• There are two attributes called cellpadding and
cellspacing which you will use to adjust the white
space in your table cell.
• Cellspacing defines the distance among each
individual cells, while cellpadding represents the
distance (in pixel value) between cell borders and
the content within it.
• Example:-

<table border="1" cellpadding="5" cellspacing="5">


<tr> <th>Name</th> <th>Salary</th> </tr>
<tr> <td>Ramesh Raman</td> <td>5000</td>
</tr>
<tr> <td>Shabbir Hussein</td> <td>7000</td>
</tr>
</table>
Colspan and Rowspan
Attributes

• We use colspan attribute of <table> tag if we want to


merge two or more columns into a single column.
• Similar way we will use rowspan <table> tag if we
want to merge two or more rows.
Example:-
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Rakesh Gupta</td>
<td>9934249057</td>
<td>9784631269</td>
</tr>
</table>

<h4>Cell that spans two rows:</h4>


<table border="1">
<tr>
<th>Name:</th>
<td>Rakesh Gupta</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>9934249057</td>
</tr>
<tr>
<td>9784631269</td>
</tr>
</table>
</body>
Table Caption

• The caption tags will serve as a title or explanation and show


up at the top of the table. This tag is depracated in newer
version of HTML/XHTML.
Example:-

<body>
<table border="1" cellpadding="5"
cellspacing="5">
<Caption>Salary Detail</caption>
<tr> <th>Name</th> <th>Salary</th>
</tr>
<tr> <td>Ramesh Raman</td>
<td>5000</td> </tr>
<tr> <td>Shabbir Hussein</td>
<td>7000</td> </tr>
</table>
</body>
Exercise: Write code for below output
Tables Backgrounds Using bgcolor and background
attribute

• bgcolor attribute - We can set background color for whole


table or just for one cell.
• background attribute - We can set background image for
whole table or just for one cell.
NOTE :-You can set border color also using bordercolor attribute.
Example:-
<BODY text="blue">
<table border=5 width=50%>
<caption><b><i>Car Price List</i></b></caption>

<tr><th bgcolor="red"colspan =2>Car <th bgcolor="yellow"> Price


<tr bgcolor="orange"><td rowspan=2>Maruti <td>Omni Van <td
align="right">200 000
<tr bgcolor="orange"><td > Maruti 800 <td align="right">242 000
<tr><td colspan=3 align=center><B> Honda<B>
<tr> <td>City <td> Petrol <td align="right">675 000
<tr><td> Accord <td>Disel <td align="right">745 000

</table>
</BODY>
Table height and
width Attribute

• We can set a table width and height using width and


height attributes.
• We can specify table width or height in terms of
integer value or in terms of percentage of available
screen area.
Example:-
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

Output:-
HTML <table>
align Attribute

• The align attribute specifies the alignment of a table


according to surrounding text.
• Contain Values as right/left/center.
Note:- Align attribute can be used with <tr> and <td>
tag also.
<html>
<body>
<table border="1" align="center" height=100 width=200>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td align=right>January</td>
<td>Rs1000</td>
</tr>
<tr>
<td align=left>March</td>
<td>Rs 2000</td>
</tr>
</table>
<p>The align attribute allows text to be wrapped around the
table.</p>
<p><b>Note:</b> The align attribute is deprecated in HTML 4, and is
not supported in HTML5. Use CSS instead.</p>
</body>
</html>
Note:Align attribute wraps the text around the table. Its is a deprecated
tag. Not used after HTML .Prefer to use CSS
<TABLE border="1"
summary="This table gives some statistics about fruit
flies: average height and weight, and percentage
with red eyes (for both males and females).">
<CAPTION><EM>A test table with merged
cells</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2">Average
<TH rowspan="2">Red<BR>eyes
<TR><TH>height<TH>weight
<TR><TH>Males<TD>1.9<TD>0.003<TD>40%
<TR><TH>Females<TD>1.7<TD>0.002<TD>43%
</TABLE>

You might also like