SlideShare a Scribd company logo
1 of 33
HTML-Table
Table
“Table is Combination of Rows and Columns,
Which intersect each other and create cell where
user store the value”
Row/Tuple Cell
Intersect
Column
Table Structure
HTML tables allow web developers to
arrange data into rows and columns.
Html table has following element
1. < table >
2. < tr >
:The <table> tag defines an HTML table.
: Each table row is defined with a <tr> tag
3. < th > / <td> : <td> and <th> tags which defined the
table’s headers and data cells
“Tables are useful for the general display of tabular data”
<table>
<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>
<Table
>
<tr>
<tr>
</tr>
</tr>
</Table>
<td>
RollNo
</td>
<td>
Name
</td>
<td>
1
</td>
<td>
Komal
</td>
<Table>
</Table>
<tr>
<tr>
tr>
</tr>
<td>
RollNo
</td>
<td>
Name </
</td>
<td>
1 </td>
<td>
Komal
</td>
RollNo Name
1 Komal
Table Attribute
The table tag begins the process of building a
table. It carries a long list of attributes ,
including
1. Border
2. Bordercolor
3. Width
4. Height
5. BGColor
6. BackGround
7. Frame
8. Rules
9. Align
10. Valign
1. Border Attribute
<td> Roll No
<td> Name
</td>
</td>
</tr>
<tr>
<td> 1
<td> Komal
</td>
</td>
</tr>
</table>
A table’s border is specified through BORDER
attribute.(Border = size)
<table Border = “ 1 ” >
<tr>
2. BorderColor Attribute
<td> Roll No </td>
<td> Name </td>
</tr>
<tr>
<td> 1 </td>
<td> Komal </td>
</tr>
</table>
A table’s bordercolor attribute is used to specify the
color of table’s border.(Bordercolor = “Any color”)
<table Border = “ 1 ” Bordercolor = “red”>
<tr>
3. Width and Height Attribute
The width property specifies the width of an
element, and the height property specifies the
height of an element.
< Table width=“50%” or Height = “50%”>
<td> Roll No
<td> Name
</td>
</td>
</tr>
<tr>
<td> 1
<td> Komal
</td>
</td>
</tr>
</table>
<table border =”1”width =50% or Height = “50%” >
BGColor
We can set background color for whole
table or just for one cell
Syntax
<table
bgcolor="color_name”>
<table Border = "1" >
<tr>
<td> Roll_No
</td>
</td>
<td> Name
</tr>
<tr>
<td> 100</td>
<td> Komal </td>
</tr>
BGcolor = "pink“ >
BackGround
The background attribute of the TABLE, TR,
and TD (TH) elements specifies the
background image of the table.
Syntax
<table background="back.gif">
Applied to an entire table.
<tr background="back.gif">
Applied to all cells in a row.
<td background="back.gif">
Applied to one cell.
<table Border = "1" Background="6.gif"
width =30% height = 55%>
<tr>
<td>Roll_No </td>
<td>Name </td>
</tr>
<tr>
<td>100 </td>
<td>Komal </td>
</tr>
</table>
Align
Align attribute of Table can positioning
Tables and their contents in relation to other
elements on the Web page.
Align attributes can be set in two levels
1. Table Alignment
2.The alignment of content inside the
Table Cells.
<table align=“Left /Center / right ">
Syntax
<Table Border = "1" align ="Center">
<tr align =“Center">
Roll_No </td>
Name </td>
100 </td>
Komal </td>
<td>
<td>
</tr>
<tr>
<td>
<td>
</tr>
</table>
Valign
The purpose of the HTML valign attribute is to
define the vertical alignment of the content of a
table cell.
Value Description
top Sets the vertical alignment of cell content top.
middle Sets the vertical alignment of cell content center.
bottom Sets the vertical alignment of cell content bottom.
<Table Border = "1" align ="Center">
<tr align =“Center">
Roll_No
<td Valign="bottom">
</td>
<td>Name </td>
</tr>
<tr>
<td>100 </td>
<td Valign=“Top"> Komal </td>
</tr>
</table>
Frame
The frameAttribute is used to specify the visibility of
outside borders.
Syntax
<table frame="value">
Attribute Values
void: It is used to hide the outside border.
above: It is used to display the top outside border.
below: It is used to display the bottom outside border.
hsides: It is used to display the top and bottom outside border.
vsides: It is used to display the left and right outside border.
lhs: It is used to display the left outside border.
rhs: It is used to display the right outside border.
box: It is used to display all sides outside border.
border: It is used to display all outside border.
<table frame="box">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
</table>
<table frame="vsides">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
</table>
<table frame=“hsides">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
</table>
Rules
The rulesAttribute is used to specify the
which parts of the inside borders that should
be visible.
Syntax
<table rules="value">
Attribute Values
•none : It does not create any lines.
•Groups : It create lines between row and column
groups.
•Rows
•Cols
: It creates line between the rows.
: It creates line between the columns.
•All : It creates line between the rows and
columns.
<table rules="rows">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
</table>
<table rules="cols">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
</table>
<table rules="all">
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
</table>
THAN
K
YOU

More Related Content

Similar to v4-html-table-210321161424.pptx

Similar to v4-html-table-210321161424.pptx (20)

HTML: Tables and Forms
HTML: Tables and FormsHTML: Tables and Forms
HTML: Tables and Forms
 
Lecture-4.pptx
Lecture-4.pptxLecture-4.pptx
Lecture-4.pptx
 
Handout5 tables
Handout5 tablesHandout5 tables
Handout5 tables
 
Table and Form HTML&CSS
Table and Form HTML&CSSTable and Form HTML&CSS
Table and Form HTML&CSS
 
Web topic 12 tables in html
Web topic 12  tables in htmlWeb topic 12  tables in html
Web topic 12 tables in html
 
HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and Forms
 
Session3 part2
Session3 part2Session3 part2
Session3 part2
 
table html web programing
table  html  web programingtable  html  web programing
table html web programing
 
HTML Tables.ppt
HTML Tables.pptHTML Tables.ppt
HTML Tables.ppt
 
Html
HtmlHtml
Html
 
Tables
TablesTables
Tables
 
Html tables
Html tablesHtml tables
Html tables
 
Html basics 7 table
Html basics 7 tableHtml basics 7 table
Html basics 7 table
 
Lecture 2.ppt
Lecture 2.pptLecture 2.ppt
Lecture 2.ppt
 
Html Table
Html TableHtml Table
Html Table
 
Lecture 5 html table
Lecture 5 html tableLecture 5 html table
Lecture 5 html table
 
RDBMS oracle function RDBMSRDBMSRDBMS.pptx
RDBMS oracle function RDBMSRDBMSRDBMS.pptxRDBMS oracle function RDBMSRDBMSRDBMS.pptx
RDBMS oracle function RDBMSRDBMSRDBMS.pptx
 
HTML Lecture Part 2 of 2
HTML Lecture Part 2 of 2HTML Lecture Part 2 of 2
HTML Lecture Part 2 of 2
 
HTML
HTMLHTML
HTML
 
HTML (Hyper Text Markup Language) by Mukesh
HTML (Hyper Text Markup Language) by MukeshHTML (Hyper Text Markup Language) by Mukesh
HTML (Hyper Text Markup Language) by Mukesh
 

Recently uploaded

Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxOH TEIK BIN
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxpboyjonauth
 
Painted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaPainted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaVirag Sontakke
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting DataJhengPantaleon
 
Science lesson Moon for 4th quarter lesson
Science lesson Moon for 4th quarter lessonScience lesson Moon for 4th quarter lesson
Science lesson Moon for 4th quarter lessonJericReyAuditor
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityGeoBlogs
 
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfEnzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfSumit Tiwari
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Sapana Sha
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdfssuser54595a
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
Biting mechanism of poisonous snakes.pdf
Biting mechanism of poisonous snakes.pdfBiting mechanism of poisonous snakes.pdf
Biting mechanism of poisonous snakes.pdfadityarao40181
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...Marc Dusseiller Dusjagr
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxmanuelaromero2013
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
internship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developerinternship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developerunnathinaik
 

Recently uploaded (20)

Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptx
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Introduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptxIntroduction to AI in Higher Education_draft.pptx
Introduction to AI in Higher Education_draft.pptx
 
Painted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of IndiaPainted Grey Ware.pptx, PGW Culture of India
Painted Grey Ware.pptx, PGW Culture of India
 
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
 
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data_Math 4-Q4 Week 5.pptx Steps in Collecting Data
_Math 4-Q4 Week 5.pptx Steps in Collecting Data
 
Science lesson Moon for 4th quarter lesson
Science lesson Moon for 4th quarter lessonScience lesson Moon for 4th quarter lesson
Science lesson Moon for 4th quarter lesson
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfEnzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
 
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111Call Girls in Dwarka Mor Delhi Contact Us 9654467111
Call Girls in Dwarka Mor Delhi Contact Us 9654467111
 
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
18-04-UA_REPORT_MEDIALITERAСY_INDEX-DM_23-1-final-eng.pdf
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
Biting mechanism of poisonous snakes.pdf
Biting mechanism of poisonous snakes.pdfBiting mechanism of poisonous snakes.pdf
Biting mechanism of poisonous snakes.pdf
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
 
How to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptxHow to Make a Pirate ship Primary Education.pptx
How to Make a Pirate ship Primary Education.pptx
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
internship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developerinternship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developer
 
9953330565 Low Rate Call Girls In Rohini Delhi NCR
9953330565 Low Rate Call Girls In Rohini  Delhi NCR9953330565 Low Rate Call Girls In Rohini  Delhi NCR
9953330565 Low Rate Call Girls In Rohini Delhi NCR
 

v4-html-table-210321161424.pptx