Scribd
Upload
126 views

Class Xi Web Application HTML Table

The document discusses various HTML tags for creating tables. It provides examples of using <table>, <tr>, <th>, and <td> tags to define a table with rows and cells. It also describes additional table attributes like border, cellpadding, cellspacing, colspan, rowspan, and how to set background colors, images, and border colors. The document provides examples of setting table height and width as well as using the <caption> tag.

Uploaded by

skrsingh15546
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
126 views

Class Xi Web Application HTML Table

The document discusses various HTML tags for creating tables. It provides examples of using <table>, <tr>, <th>, and <td> tags to define a table with rows and cells. It also describes additional table attributes like border, cellpadding, cellspacing, colspan, rowspan, and how to set background colors, images, and border colors. The document provides examples of setting table height and width as well as using the <caption> tag.

Uploaded by

skrsingh15546
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/ 15

DAV MODEL SCHOOL, DURGAPUR

J.M. SENGUPTA ROAD, B-ZONE, DURGAPUR,


PASCHIM BARDHAMAN, WEST BENGAL - 713205

WEB APPLICATIONS
HTML TAGS WITH EXAMPLE

DAV MODEL SCHOOL, DURGAPUR


CLASS XI(HUM)

HTML(Hypertext Mark-up
Language)

DAV MODEL SCHOOL, DURGAPUR


Online Classes

❑TODAY’S TOPIC
❑PRACTICAL DEMONSTRATION
❑HANDS ON
❑ ASSIGNMENT OR HOME WORK

DAV MODEL SCHOOL, DURGAPUR


HTML Table
HTML tables allow web developers to display data into rows and
columns.
Qualification Year of Passing Percentage
M.Sc 2010 79
B.Sc 2008 82

To define an HTML Table we use <table> tag.

<tr> is used to define table row.


<th> is used to define table heading.
<td> tag is used to define table data.

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.

DAV MODEL SCHOOL, DURGAPUR


HTML Table- <table> tag with <tr>,<th> & <td>

DAV MODEL SCHOOL, DURGAPUR


Add Border to the Table
HTML Table - Add a Border
To add a border to a table, we use the CSS border property:

Example

<table border=4>

Table Heading

✓ Table heading can be defined using <th> tag.

✓ Normally the top row will be table heading, and we use <th> element
in any row.

✓ Headings, which are defined in <th> tag are centered and bold by
default.

DAV MODEL SCHOOL, DURGAPUR


HTML <th> tag- To define Table Heading

DAV MODEL SCHOOL, DURGAPUR


Table- cellpadding & cellspacing
Cellpadding and Cellspacing are used to adjust the white space
in your table cells.
cellspacing attribute defines space(gape) between table cells,

cellpadding represents the distance between cell borders and the content
within a cell.

<br> element) have no


contents called empty elements
DAV MODEL SCHOOL, DURGAPUR
Table Cellpadding & Cellspacing

DAV MODEL SCHOOL, DURGAPUR


Table colspan and rowspan
colspan attribute are used to merge two or more columns into a
single column.
rowspan are used to merge two or more rows.

DAV MODEL SCHOOL, DURGAPUR


Table Backgrounds

Table Backgrounds can be set using one of the following ways −

bgcolor attribute − Used to set background color for whole table or just
for one cell.

background attribute − Used to set background image for whole table or


just for one cell.

bordercolor attribute- Used to set border color

DAV MODEL SCHOOL, DURGAPUR


Table Backgrounds
bgcolor background bordercolor

DAV MODEL SCHOOL, DURGAPUR


HOW TO RUN HTML FILE
Image can also be used as a background attribute.
<!DOCTYPE html>
<html> <head> <title>HTML Table Background</title> </head>
<body>
<table border = "1" bordercolor = "red" background = "mewarlogo.png">
<tr> <th>Name</th>
<th>Qualification</th>
<th>yr of passing</th>
</tr>
<tr>
<td rowspan = "2">Sujit Singh</td>
<td>M.Tech</td><td>2010</td>
</tr>
<tr>
<td>M.C.A</td>
<td>2004</td>
</tr>
<tr>
<td colspan = "3">Working as a Teacher</td>
</tr>
</table> </body></html>
DAV MODEL SCHOOL, DURGAPUR
Table Height & Width
Using height and width we can set a table width and height.
The value of width or height always be define in terms of pixels or
in terms of percentage.

DAV MODEL SCHOOL, DURGAPUR


TABLE caption
The table caption tag used to give a title or explanation for the table and
it display at the top of the table.
This tag is not used in newer version of HTML/XHTML.

DAV MODEL SCHOOL, DURGAPUR

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy