SlideShare ist ein Scribd-Unternehmen logo
1 von 14
HTML Table
 HTML table tag is used to display data in tabular
form (row * column). There can be many columns in
a row.
 We can create a table to display data in tabular form,
using <table> element, with the help of <tr> , <td>,
and <th> elements.
 In Each table, table row is defined by <tr> tag, table
header is defined by <th>, and table data is defined
by <td> tags.
 HTML tables are used to manage the layout of the
page e.g. header section, navigation bar, body
content, footer section etc. But it is recommended to
use div tag over table to manage the layout of the
page .
 Attribute of<th> — table header — A header cell in
a <table>.
 <td> — table data — A data cell in a <table>.
HTML Table Tags
Tag Description
<table> It defines a table.
<tr> It defines a row in a table.
<th> It defines a header cell in a table.
<td> It defines a cell in a table.
<caption> It defines the table caption.
<colgroup> It specifies a group of one or more
columns in a table for formatting.
<col> It is used with <colgroup> element to
specify column properties for each
column.
<tbody> It is used to group the body content in
a table.
<thead> It is used to group the header content
in a table.
<tfooter> It is used to group the footer content in
a table.
HTML Border attribute
 <table border="1">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
 </table>
HTML table with caption
 HTML caption is diplayed above the table. It must
be used after table tag only.
<table>
<caption>Student Records</caption>
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr>
<tr><td>Mike</td><td>Warn</td><td>60</td></tr>
<tr><td>Shane</td><td>Warn</td><td>42</td></tr>
<tr><td>Jai</td><td>Malhotra</td><td>62</td></tr>
</table>
What does colspan= do?
 Allows a single table cell to span the width of more
than one cell or column.
<table> <caption>Life Expectancy By Current
Age</caption>
<tr> <th colspan="2">65</th>
<th colspan="2">40</th>
<th colspan="2">20</th>
</tr>
<tr>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr> <
/table>
Life Expectancy By Current Age
65 40 20
Men Women Men Women Men Women
82 85 78 82 77 81
What does rowspan= do?
Allows a single table cell to span the height of more than one cell or row.
<table>
<caption>Favorite and Least Favorite Things</caption>
<tr>
<th></th>
<th></th>
<th>Bob</th>
<th>Alice</th>
</tr> <tr>
<th rowspan="2">Favorite</th> <th>Color</th>
<td>Blue</td>
<td>Purple</td>
</tr> <tr>
<th>Flavor</th>
<td>Banana</td>
<td>Chocolate</td>
</tr> <tr>
<th rowspan="2">Least Favorite</th>
<th>Color</th>
<td>Yellow</td>
<td>Pink</td>
</tr> <tr>
<th>Flavor</th>
<td>Mint</td>
<td>Walnut</td>
</tr>
</table>
Bob Alice
Favorite
Color Blue Purple
Flavor Banana Chocolate
Least
Favorite
Color Yellow Pink
Flavor Mint Walnut
Table background color
 The HTML <table> bgcolor Attribute is use
to specify the background color of a table.
Syntax:
<table bgcolor="color_name | hex_number |
rgb_number">
Attribute Values:
color_name: It sets the text color by using the color name. For
example “red”.
hex_number: It sets the text color by using the color hex code. For
example “#0000ff”.
rgb_number: It sets the text color by using the rgb code. For
example: “RGB(0, 153, 0)” .
Note: The <table> bgcolor Attribute is not supported by HTML 5 instead of
using this we can use CSS background-color property. .
<table border="1"
bgcolor="green">
<caption>
Author Details
</caption>
<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
<td> bgcolor Attribute
 The HTML <td> bgcolor attribute is used to specify
the background color of a table cell. It is not
supported by HTML 5.
Syntax:
 <td bgcolor= "color_name | hex_number |
rgb_number">
Attribute Values:
 color_name: It sets the text color by using the color
name. For example “red”.
 hex_number: It sets the text color by using the color
hex code. For example “#0000ff”.
 rgb_number: It sets the text color by using the rgb
code. For example: “RGB(0, 153, 0)”.
<tr>
<td bgcolor="green">BITTU</td>
<td bgcolor="red">22</td>
<td bgcolor="yellow">CSE</td>
</tr>
<tr>
<td bgcolor="yellow">RAKESH</td>
<td bgcolor="green">25</td>
<td bgcolor="red">EC</td>
</tr>
HTML <colgroup> Tag
<table>
<colgroup>
<col span="2" style="background-
color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
The <tbody> tag is used to group the
body content in an HTML table.
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>

Weitere ähnliche Inhalte

Ähnlich wie Lecture-4.pptx

Web topic 12 tables in html
Web topic 12  tables in htmlWeb topic 12  tables in html
Web topic 12 tables in html
CK Yang
 
HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and Forms
Doncho Minkov
 
Web forms and html lecture Number 3
Web forms and html lecture Number 3Web forms and html lecture Number 3
Web forms and html lecture Number 3
Mudasir Syed
 

Ähnlich wie Lecture-4.pptx (20)

Table and Form HTML&CSS
Table and Form HTML&CSSTable and Form HTML&CSS
Table and Form HTML&CSS
 
Chapter 8: Tables
Chapter 8: TablesChapter 8: Tables
Chapter 8: Tables
 
Html Table
Html TableHtml Table
Html Table
 
html-table
html-tablehtml-table
html-table
 
Html tables
Html tablesHtml tables
Html tables
 
HTML Tables.ppt
HTML Tables.pptHTML Tables.ppt
HTML Tables.ppt
 
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
 
HTML: Tables and Forms
HTML: Tables and FormsHTML: Tables and Forms
HTML: Tables and Forms
 
Web design - Working with tables in HTML
Web design - Working with tables in HTMLWeb design - Working with tables in HTML
Web design - Working with tables in HTML
 
RDBMS oracle function RDBMSRDBMSRDBMS.pptx
RDBMS oracle function RDBMSRDBMSRDBMS.pptxRDBMS oracle function RDBMSRDBMSRDBMS.pptx
RDBMS oracle function RDBMSRDBMSRDBMS.pptx
 
Handout5 tables
Handout5 tablesHandout5 tables
Handout5 tables
 
Session3 part2
Session3 part2Session3 part2
Session3 part2
 
Web forms and html lecture Number 3
Web forms and html lecture Number 3Web forms and html lecture Number 3
Web forms and html lecture Number 3
 
Html
HtmlHtml
Html
 
HTML
HTMLHTML
HTML
 
Lecture 5 html table
Lecture 5 html tableLecture 5 html table
Lecture 5 html table
 
Lect# 1 html part ii
Lect# 1 html part iiLect# 1 html part ii
Lect# 1 html part ii
 
Working With Tables in HTML
Working With Tables in HTMLWorking With Tables in HTML
Working With Tables in HTML
 
Html3
Html3Html3
Html3
 

Mehr von vishal choudhary

Mehr von vishal choudhary (20)

SE-Lecture1.ppt
SE-Lecture1.pptSE-Lecture1.ppt
SE-Lecture1.ppt
 
SE-Testing.ppt
SE-Testing.pptSE-Testing.ppt
SE-Testing.ppt
 
SE-CyclomaticComplexityand Testing.ppt
SE-CyclomaticComplexityand Testing.pptSE-CyclomaticComplexityand Testing.ppt
SE-CyclomaticComplexityand Testing.ppt
 
SE-Lecture-7.pptx
SE-Lecture-7.pptxSE-Lecture-7.pptx
SE-Lecture-7.pptx
 
Se-Lecture-6.ppt
Se-Lecture-6.pptSe-Lecture-6.ppt
Se-Lecture-6.ppt
 
SE-Lecture-5.pptx
SE-Lecture-5.pptxSE-Lecture-5.pptx
SE-Lecture-5.pptx
 
XML.pptx
XML.pptxXML.pptx
XML.pptx
 
SE-Lecture-8.pptx
SE-Lecture-8.pptxSE-Lecture-8.pptx
SE-Lecture-8.pptx
 
SE-coupling and cohesion.ppt
SE-coupling and cohesion.pptSE-coupling and cohesion.ppt
SE-coupling and cohesion.ppt
 
SE-Lecture-2.pptx
SE-Lecture-2.pptxSE-Lecture-2.pptx
SE-Lecture-2.pptx
 
SE-software design.ppt
SE-software design.pptSE-software design.ppt
SE-software design.ppt
 
SE1.ppt
SE1.pptSE1.ppt
SE1.ppt
 
SE-Lecture-4.pptx
SE-Lecture-4.pptxSE-Lecture-4.pptx
SE-Lecture-4.pptx
 
SE-Lecture=3.pptx
SE-Lecture=3.pptxSE-Lecture=3.pptx
SE-Lecture=3.pptx
 
Multimedia-Lecture-Animation.pptx
Multimedia-Lecture-Animation.pptxMultimedia-Lecture-Animation.pptx
Multimedia-Lecture-Animation.pptx
 
MultimediaLecture5.pptx
MultimediaLecture5.pptxMultimediaLecture5.pptx
MultimediaLecture5.pptx
 
Multimedia-Lecture-7.pptx
Multimedia-Lecture-7.pptxMultimedia-Lecture-7.pptx
Multimedia-Lecture-7.pptx
 
MultiMedia-Lecture-4.pptx
MultiMedia-Lecture-4.pptxMultiMedia-Lecture-4.pptx
MultiMedia-Lecture-4.pptx
 
Multimedia-Lecture-6.pptx
Multimedia-Lecture-6.pptxMultimedia-Lecture-6.pptx
Multimedia-Lecture-6.pptx
 
Multimedia-Lecture-3.pptx
Multimedia-Lecture-3.pptxMultimedia-Lecture-3.pptx
Multimedia-Lecture-3.pptx
 

Kürzlich hochgeladen

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 

Kürzlich hochgeladen (20)

Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 

Lecture-4.pptx

  • 2.  HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.  We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.  In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.  HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. But it is recommended to use div tag over table to manage the layout of the page .
  • 3.  Attribute of<th> — table header — A header cell in a <table>.  <td> — table data — A data cell in a <table>.
  • 4. HTML Table Tags Tag Description <table> It defines a table. <tr> It defines a row in a table. <th> It defines a header cell in a table. <td> It defines a cell in a table. <caption> It defines the table caption. <colgroup> It specifies a group of one or more columns in a table for formatting. <col> It is used with <colgroup> element to specify column properties for each column. <tbody> It is used to group the body content in a table. <thead> It is used to group the header content in a table. <tfooter> It is used to group the footer content in a table.
  • 5. HTML Border attribute  <table border="1"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>  </table>
  • 6. HTML table with caption  HTML caption is diplayed above the table. It must be used after table tag only. <table> <caption>Student Records</caption> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> <tr><td>Mike</td><td>Warn</td><td>60</td></tr> <tr><td>Shane</td><td>Warn</td><td>42</td></tr> <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> </table>
  • 7. What does colspan= do?  Allows a single table cell to span the width of more than one cell or column. <table> <caption>Life Expectancy By Current Age</caption> <tr> <th colspan="2">65</th> <th colspan="2">40</th> <th colspan="2">20</th> </tr> <tr> <th>Men</th> <th>Women</th> <th>Men</th> <th>Women</th> <th>Men</th> <th>Women</th> </tr> <tr> <td>82</td> <td>85</td> <td>78</td> <td>82</td> <td>77</td> <td>81</td> </tr> < /table> Life Expectancy By Current Age 65 40 20 Men Women Men Women Men Women 82 85 78 82 77 81
  • 8. What does rowspan= do? Allows a single table cell to span the height of more than one cell or row. <table> <caption>Favorite and Least Favorite Things</caption> <tr> <th></th> <th></th> <th>Bob</th> <th>Alice</th> </tr> <tr> <th rowspan="2">Favorite</th> <th>Color</th> <td>Blue</td> <td>Purple</td> </tr> <tr> <th>Flavor</th> <td>Banana</td> <td>Chocolate</td> </tr> <tr> <th rowspan="2">Least Favorite</th> <th>Color</th> <td>Yellow</td> <td>Pink</td> </tr> <tr> <th>Flavor</th> <td>Mint</td> <td>Walnut</td> </tr> </table> Bob Alice Favorite Color Blue Purple Flavor Banana Chocolate Least Favorite Color Yellow Pink Flavor Mint Walnut
  • 9. Table background color  The HTML <table> bgcolor Attribute is use to specify the background color of a table. Syntax: <table bgcolor="color_name | hex_number | rgb_number"> Attribute Values: color_name: It sets the text color by using the color name. For example “red”. hex_number: It sets the text color by using the color hex code. For example “#0000ff”. rgb_number: It sets the text color by using the rgb code. For example: “RGB(0, 153, 0)” . Note: The <table> bgcolor Attribute is not supported by HTML 5 instead of using this we can use CSS background-color property. .
  • 11. <td> bgcolor Attribute  The HTML <td> bgcolor attribute is used to specify the background color of a table cell. It is not supported by HTML 5. Syntax:  <td bgcolor= "color_name | hex_number | rgb_number"> Attribute Values:  color_name: It sets the text color by using the color name. For example “red”.  hex_number: It sets the text color by using the color hex code. For example “#0000ff”.  rgb_number: It sets the text color by using the rgb code. For example: “RGB(0, 153, 0)”.
  • 12. <tr> <td bgcolor="green">BITTU</td> <td bgcolor="red">22</td> <td bgcolor="yellow">CSE</td> </tr> <tr> <td bgcolor="yellow">RAKESH</td> <td bgcolor="green">25</td> <td bgcolor="red">EC</td> </tr>
  • 13. HTML <colgroup> Tag <table> <colgroup> <col span="2" style="background- color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first HTML</td> <td>$53</td> </tr> </table>
  • 14. The <tbody> tag is used to group the body content in an HTML table. <table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> </table>