SlideShare a Scribd company logo
1 of 24
HTML TABLES
By Tr. MJ Fernandez
Joy in Learning School Inc.
Defining an HTML Table
â—¦An HTML table is defined with the <table> tag.
â—¦Each table row is defined with the <tr> tag. A table
header is defined with the <th> tag. By default, table
headings are bold and centered. A table data/cell is
defined with the <td> tag.
HTML Table - Adding a Border
â—¦If you do not specify a border for the table, it will be
displayed without borders.
â—¦A border is set using the CSS border property:
HTML Table - Adding a Border
â—¦If you do not specify a border for the table, it will be
displayed without borders.
â—¦A border is set using the CSS border property:
HTML Table - Adding Cell Padding
â—¦Cell padding specifies the space between the cell
content and its borders.
â—¦If you do not specify a padding, the table cells will be
displayed without padding.
â—¦To set the padding, use the CSS padding property:
HTML Table - Left-align Headings
â—¦By default, table headings are bold and centered.
â—¦To left-align the table headings, use the CSS text-align
property:
HTML Table - Adding Border Spacing
â—¦Border spacing specifies the space between the cells.
â—¦To set the border spacing for a table, use the CSS
border-spacing property:
HTML Table - Cells that Span Many
Columns
â—¦To make a cell span more than one column, use the
colspan attribute:
HTML Table - Cells that Span Many
Rows
â—¦To make a cell span more than one row, use the rowspan
attribute:
HTML Table - Adding a Caption
â—¦To add a caption to a table, use the <caption> tag:
A Special Style for One Table
â—¦To define a special style for a special table, add an id
attribute to the table:
Now you can define a special style for this
table:
Now you can define a special style for this
table:
Chapter Summary
â—¦ Use the HTML <table> element to define a table
â—¦ Use the HTML <tr> element to define a table row
â—¦ Use the HTML <td> element to define a table data
â—¦ Use the HTML <th> element to define a table heading
â—¦ Use the HTML <caption> element to define a table caption
â—¦ Use the CSS border property to define a border
â—¦ Use the CSS border-collapse property to collapse cell borders
â—¦ Use the CSS padding property to add padding to cells
â—¦ Use the CSS text-align property to align cell text
â—¦ Use the CSS border-spacing property to set the spacing between cells
â—¦ Use the colspan attribute to make a cell span many columns
â—¦ Use the rowspan attribute to make a cell span many rows
â—¦ Use the id attribute to uniquely define one table
REFERENCE:
HTML TABLE
https://www.w3schools.com/html/html_tables.asp

More Related Content

What's hot

(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
Dave Kelly
 
Div tag presentation
Div tag presentationDiv tag presentation
Div tag presentation
alyssa_lum11
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
Aarti P
 
Html presentation
Html presentationHtml presentation
Html presentation
Amber Bhaumik
 

What's hot (20)

CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Html tables
Html tablesHtml tables
Html tables
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
Css types internal, external and inline (1)
Css types internal, external and inline (1)Css types internal, external and inline (1)
Css types internal, external and inline (1)
 
Css animation
Css animationCss animation
Css animation
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
css.ppt
css.pptcss.ppt
css.ppt
 
How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 Days
 
Div tag presentation
Div tag presentationDiv tag presentation
Div tag presentation
 
Css font properties
Css font propertiesCss font properties
Css font properties
 
Images and Tables in HTML
Images and Tables in HTMLImages and Tables in HTML
Images and Tables in HTML
 
Web html table tags
Web html  table tagsWeb html  table tags
Web html table tags
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
 
Links in Html
Links in HtmlLinks in Html
Links in Html
 
Html presentation
Html presentationHtml presentation
Html presentation
 

Similar to Html table

Chapter 4 class presentation
Chapter 4 class presentationChapter 4 class presentation
Chapter 4 class presentation
cmurphysvhs
 

Similar to Html table (20)

htmltable.pptx
htmltable.pptxhtmltable.pptx
htmltable.pptx
 
Html tables
Html tablesHtml tables
Html tables
 
WEP4 and 5.pptx
WEP4 and 5.pptxWEP4 and 5.pptx
WEP4 and 5.pptx
 
htmltables-180721142906-1.pptx
htmltables-180721142906-1.pptxhtmltables-180721142906-1.pptx
htmltables-180721142906-1.pptx
 
HTML Tables in Omeka
HTML Tables in OmekaHTML Tables in Omeka
HTML Tables in Omeka
 
Html tables
Html tablesHtml tables
Html tables
 
Html3
Html3Html3
Html3
 
Html3
Html3Html3
Html3
 
CSS
CSSCSS
CSS
 
Html tables
Html tablesHtml tables
Html tables
 
HTML Tables
HTML TablesHTML Tables
HTML Tables
 
Chapter 4 class presentation
Chapter 4 class presentationChapter 4 class presentation
Chapter 4 class presentation
 
Chapter 4 class presentation
Chapter 4 class presentationChapter 4 class presentation
Chapter 4 class presentation
 
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
 
Lecture 2.ppt
Lecture 2.pptLecture 2.ppt
Lecture 2.ppt
 
Presentation (2).pptx
Presentation (2).pptxPresentation (2).pptx
Presentation (2).pptx
 
Table and Form HTML&CSS
Table and Form HTML&CSSTable and Form HTML&CSS
Table and Form HTML&CSS
 
HTML Tables
HTML TablesHTML Tables
HTML Tables
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
HTML Tables.ppt
HTML Tables.pptHTML Tables.ppt
HTML Tables.ppt
 

More from JayjZens

1. introduction to html5
1. introduction to html51. introduction to html5
1. introduction to html5
JayjZens
 
Creating you first web page!
Creating you first web page!Creating you first web page!
Creating you first web page!
JayjZens
 

More from JayjZens (18)

Science 7 lesson 1.1
Science 7 lesson 1.1Science 7 lesson 1.1
Science 7 lesson 1.1
 
Quilling famtime
Quilling famtimeQuilling famtime
Quilling famtime
 
Rebekah women of the bible
Rebekah women of the bibleRebekah women of the bible
Rebekah women of the bible
 
1. intro ict
1. intro ict1. intro ict
1. intro ict
 
Evaluating internet resources
Evaluating internet resourcesEvaluating internet resources
Evaluating internet resources
 
Web browser &amp; search engine
Web browser &amp; search engineWeb browser &amp; search engine
Web browser &amp; search engine
 
Introbotics
IntroboticsIntrobotics
Introbotics
 
Creating &amp; organizing bookmark for website
Creating &amp; organizing bookmark for websiteCreating &amp; organizing bookmark for website
Creating &amp; organizing bookmark for website
 
Advantages and disadvantages of using online tools
Advantages and disadvantages of using online toolsAdvantages and disadvantages of using online tools
Advantages and disadvantages of using online tools
 
1. introduction to html5
1. introduction to html51. introduction to html5
1. introduction to html5
 
Styling of css
Styling of cssStyling of css
Styling of css
 
Html links
Html linksHtml links
Html links
 
Html images syntax
Html images syntaxHtml images syntax
Html images syntax
 
Creating you first web page!
Creating you first web page!Creating you first web page!
Creating you first web page!
 
Roborobo 3 parts
Roborobo  3 partsRoborobo  3 parts
Roborobo 3 parts
 
Roborobo 3 p arts definition
Roborobo  3 p arts definitionRoborobo  3 p arts definition
Roborobo 3 p arts definition
 
Liquidity ratio
Liquidity ratioLiquidity ratio
Liquidity ratio
 
Corals and coral reefs
Corals and coral reefsCorals and coral reefs
Corals and coral reefs
 

Recently uploaded

Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg
 
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
VictoriaMetrics
 

Recently uploaded (20)

WSO2Con2024 - From Blueprint to Brilliance: WSO2's Guide to API-First Enginee...
WSO2Con2024 - From Blueprint to Brilliance: WSO2's Guide to API-First Enginee...WSO2Con2024 - From Blueprint to Brilliance: WSO2's Guide to API-First Enginee...
WSO2Con2024 - From Blueprint to Brilliance: WSO2's Guide to API-First Enginee...
 
WSO2Con204 - Hard Rock Presentation - Keynote
WSO2Con204 - Hard Rock Presentation - KeynoteWSO2Con204 - Hard Rock Presentation - Keynote
WSO2Con204 - Hard Rock Presentation - Keynote
 
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
 
What Goes Wrong with Language Definitions and How to Improve the Situation
What Goes Wrong with Language Definitions and How to Improve the SituationWhat Goes Wrong with Language Definitions and How to Improve the Situation
What Goes Wrong with Language Definitions and How to Improve the Situation
 
WSO2CON 2024 - Unlocking the Identity: Embracing CIAM 2.0 for a Competitive A...
WSO2CON 2024 - Unlocking the Identity: Embracing CIAM 2.0 for a Competitive A...WSO2CON 2024 - Unlocking the Identity: Embracing CIAM 2.0 for a Competitive A...
WSO2CON 2024 - Unlocking the Identity: Embracing CIAM 2.0 for a Competitive A...
 
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa%in tembisa+277-882-255-28 abortion pills for sale in tembisa
%in tembisa+277-882-255-28 abortion pills for sale in tembisa
 
WSO2CON 2024 - IoT Needs CIAM: The Importance of Centralized IAM in a Growing...
WSO2CON 2024 - IoT Needs CIAM: The Importance of Centralized IAM in a Growing...WSO2CON 2024 - IoT Needs CIAM: The Importance of Centralized IAM in a Growing...
WSO2CON 2024 - IoT Needs CIAM: The Importance of Centralized IAM in a Growing...
 
WSO2Con2024 - Simplified Integration: Unveiling the Latest Features in WSO2 L...
WSO2Con2024 - Simplified Integration: Unveiling the Latest Features in WSO2 L...WSO2Con2024 - Simplified Integration: Unveiling the Latest Features in WSO2 L...
WSO2Con2024 - Simplified Integration: Unveiling the Latest Features in WSO2 L...
 
WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?
 
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
 
WSO2Con2024 - Organization Management: The Revolution in B2B CIAM
WSO2Con2024 - Organization Management: The Revolution in B2B CIAMWSO2Con2024 - Organization Management: The Revolution in B2B CIAM
WSO2Con2024 - Organization Management: The Revolution in B2B CIAM
 
Artyushina_Guest lecture_YorkU CS May 2024.pptx
Artyushina_Guest lecture_YorkU CS May 2024.pptxArtyushina_Guest lecture_YorkU CS May 2024.pptx
Artyushina_Guest lecture_YorkU CS May 2024.pptx
 
AzureNativeQumulo_HPC_Cloud_Native_Benchmarks.pdf
AzureNativeQumulo_HPC_Cloud_Native_Benchmarks.pdfAzureNativeQumulo_HPC_Cloud_Native_Benchmarks.pdf
AzureNativeQumulo_HPC_Cloud_Native_Benchmarks.pdf
 
Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the pastArchitecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the past
 
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
 
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With SimplicityWSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
WSO2Con2024 - Enabling Transactional System's Exponential Growth With Simplicity
 
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
 
%in Soweto+277-882-255-28 abortion pills for sale in soweto
%in Soweto+277-882-255-28 abortion pills for sale in soweto%in Soweto+277-882-255-28 abortion pills for sale in soweto
%in Soweto+277-882-255-28 abortion pills for sale in soweto
 
WSO2CON 2024 - Architecting AI in the Enterprise: APIs and Applications
WSO2CON 2024 - Architecting AI in the Enterprise: APIs and ApplicationsWSO2CON 2024 - Architecting AI in the Enterprise: APIs and Applications
WSO2CON 2024 - Architecting AI in the Enterprise: APIs and Applications
 
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
WSO2CON 2024 - API Management Usage at La Poste and Its Impact on Business an...
 

Html table

  • 1. HTML TABLES By Tr. MJ Fernandez Joy in Learning School Inc.
  • 2. Defining an HTML Table â—¦An HTML table is defined with the <table> tag. â—¦Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
  • 3.
  • 4. HTML Table - Adding a Border â—¦If you do not specify a border for the table, it will be displayed without borders. â—¦A border is set using the CSS border property:
  • 5.
  • 6. HTML Table - Adding a Border â—¦If you do not specify a border for the table, it will be displayed without borders. â—¦A border is set using the CSS border property:
  • 7.
  • 8. HTML Table - Adding Cell Padding â—¦Cell padding specifies the space between the cell content and its borders. â—¦If you do not specify a padding, the table cells will be displayed without padding. â—¦To set the padding, use the CSS padding property:
  • 9.
  • 10. HTML Table - Left-align Headings â—¦By default, table headings are bold and centered. â—¦To left-align the table headings, use the CSS text-align property:
  • 11.
  • 12. HTML Table - Adding Border Spacing â—¦Border spacing specifies the space between the cells. â—¦To set the border spacing for a table, use the CSS border-spacing property:
  • 13.
  • 14. HTML Table - Cells that Span Many Columns â—¦To make a cell span more than one column, use the colspan attribute:
  • 15.
  • 16. HTML Table - Cells that Span Many Rows â—¦To make a cell span more than one row, use the rowspan attribute:
  • 17.
  • 18. HTML Table - Adding a Caption â—¦To add a caption to a table, use the <caption> tag:
  • 19.
  • 20. A Special Style for One Table â—¦To define a special style for a special table, add an id attribute to the table:
  • 21. Now you can define a special style for this table:
  • 22. Now you can define a special style for this table:
  • 23. Chapter Summary â—¦ Use the HTML <table> element to define a table â—¦ Use the HTML <tr> element to define a table row â—¦ Use the HTML <td> element to define a table data â—¦ Use the HTML <th> element to define a table heading â—¦ Use the HTML <caption> element to define a table caption â—¦ Use the CSS border property to define a border â—¦ Use the CSS border-collapse property to collapse cell borders â—¦ Use the CSS padding property to add padding to cells â—¦ Use the CSS text-align property to align cell text â—¦ Use the CSS border-spacing property to set the spacing between cells â—¦ Use the colspan attribute to make a cell span many columns â—¦ Use the rowspan attribute to make a cell span many rows â—¦ Use the id attribute to uniquely define one table