SlideShare une entreprise Scribd logo
1  sur  12
Télécharger pour lire hors ligne
Tables
Lesson 3
By: Hector Tejada
Objective
 Learn how to make a borderless table
 Learn how to make a border table
 Learn how to give a table color or an
  image background
Requirements:

• Notepad
Why would you want a table?
Tables are used very often when making a website. Most
of the time people just can’t see them because they are
borderless. Tables are great for placing images. They are
great for showing a large amount of data, and makes
your website look more neat. They are used for many more
things.
Step 1



Start with the table tag. The table tag looks
like the image below. Then use the border
attribute. For now set it to 1.
Step 2



Next is the table row tag. As you probably
guessed it, it is used to make table rows. The
tag looks like this <tr>
Step 3



The next step is to use the td tag. TD stands
for table data. You use this tag to put in the
information that you want to put in the
table.
Step 4



Once you have done that you can add
more data or add another row. So far your
html should look like something like this.
Step 5


Now you can add a color background to
these tables or an image background. To
do that you must use the background
attribute. You can also change the font
using the font color attribute.
Step 6



Now its time for you to make a borderless
table. To do this when you use the border
attribute instead of using a border of one
you use 0.
Step 7



It is best if you do not use a color
background because can see the table.
Tables are great to place images. So trying
placing an image in the left corner of your
page.
Review



Alright now that we are done you should be
able to:
 Make a bordered table
 Make a borderless table
 Give a table color
Test



Now I want you to make me a page with a
image in the upper left corner with a
borderless table and with a bordered table
in the center that includes color in the cells.

Contenu connexe

En vedette

《昨年は1万社が合格!》創業時に知っておきたい、経済産業省から700万円の補助金を獲得する方法とは?
《昨年は1万社が合格!》創業時に知っておきたい、経済産業省から700万円の補助金を獲得する方法とは?《昨年は1万社が合格!》創業時に知っておきたい、経済産業省から700万円の補助金を獲得する方法とは?
《昨年は1万社が合格!》創業時に知っておきたい、経済産業省から700万円の補助金を獲得する方法とは?schoowebcampus
 
Computer
ComputerComputer
ComputerIIFP
 
Requirements testing final
Requirements testing   finalRequirements testing   final
Requirements testing finalJash Mehta
 
IFLA-illustrated-presentation June2015
IFLA-illustrated-presentation June2015IFLA-illustrated-presentation June2015
IFLA-illustrated-presentation June2015Mary Minicka
 
The future of community based services and education
The future of community based services and educationThe future of community based services and education
The future of community based services and educationTraci Jones
 
Far More Could Be Done To Stop The Deadly Bacteria C
Far More Could Be Done To Stop The Deadly Bacteria CFar More Could Be Done To Stop The Deadly Bacteria C
Far More Could Be Done To Stop The Deadly Bacteria Cesalozzo
 
Uts medpem sani ramdani 1002433
Uts medpem sani ramdani 1002433Uts medpem sani ramdani 1002433
Uts medpem sani ramdani 1002433Sany Mymuse
 
CliqTags - Features and benefits
CliqTags - Features and benefitsCliqTags - Features and benefits
CliqTags - Features and benefitsCliqTags
 

En vedette (10)

《昨年は1万社が合格!》創業時に知っておきたい、経済産業省から700万円の補助金を獲得する方法とは?
《昨年は1万社が合格!》創業時に知っておきたい、経済産業省から700万円の補助金を獲得する方法とは?《昨年は1万社が合格!》創業時に知っておきたい、経済産業省から700万円の補助金を獲得する方法とは?
《昨年は1万社が合格!》創業時に知っておきたい、経済産業省から700万円の補助金を獲得する方法とは?
 
Computer
ComputerComputer
Computer
 
Requirements testing final
Requirements testing   finalRequirements testing   final
Requirements testing final
 
IFLA-illustrated-presentation June2015
IFLA-illustrated-presentation June2015IFLA-illustrated-presentation June2015
IFLA-illustrated-presentation June2015
 
The future of community based services and education
The future of community based services and educationThe future of community based services and education
The future of community based services and education
 
Far More Could Be Done To Stop The Deadly Bacteria C
Far More Could Be Done To Stop The Deadly Bacteria CFar More Could Be Done To Stop The Deadly Bacteria C
Far More Could Be Done To Stop The Deadly Bacteria C
 
Uts medpem sani ramdani 1002433
Uts medpem sani ramdani 1002433Uts medpem sani ramdani 1002433
Uts medpem sani ramdani 1002433
 
Christianity
ChristianityChristianity
Christianity
 
Yolanda (3) (1)
Yolanda (3) (1)Yolanda (3) (1)
Yolanda (3) (1)
 
CliqTags - Features and benefits
CliqTags - Features and benefitsCliqTags - Features and benefits
CliqTags - Features and benefits
 

Similaire à HTML Lesson 3

Lesson 10 working with tables
Lesson 10   working with tablesLesson 10   working with tables
Lesson 10 working with tablesguevarra_2000
 
Lesson 10 working with tables
Lesson 10   working with tablesLesson 10   working with tables
Lesson 10 working with tablesguevarra_2000
 
Tutorial of microsoft excel 2007
Tutorial of microsoft excel 2007Tutorial of microsoft excel 2007
Tutorial of microsoft excel 2007sabillafh
 
Tutorial of microsoft excel 2007
Tutorial of microsoft excel 2007Tutorial of microsoft excel 2007
Tutorial of microsoft excel 2007sabillafh
 
Dreamweaver-Day 01: Property Menus & Tables
Dreamweaver-Day 01: Property Menus & TablesDreamweaver-Day 01: Property Menus & Tables
Dreamweaver-Day 01: Property Menus & TablesJoe Prindiville
 
HTML Lesson 2
HTML Lesson 2HTML Lesson 2
HTML Lesson 2TonyC445
 
GC TUG Spring 2024 - Dashboard Actions.pptx
GC TUG Spring 2024 - Dashboard Actions.pptxGC TUG Spring 2024 - Dashboard Actions.pptx
GC TUG Spring 2024 - Dashboard Actions.pptxRuss Cantrell
 
Tutorial how to use a picture as a presentation slide background
Tutorial   how to use a picture as a presentation slide backgroundTutorial   how to use a picture as a presentation slide background
Tutorial how to use a picture as a presentation slide backgroundFreelance
 
How Do I Make The Page Go Side Introducing Web Page Design
How Do I Make The Page Go Side   Introducing Web Page DesignHow Do I Make The Page Go Side   Introducing Web Page Design
How Do I Make The Page Go Side Introducing Web Page DesignGreenwich Council
 
Subject page art powerpoint
Subject page   art powerpointSubject page   art powerpoint
Subject page art powerpointcourteneyharding
 
Word Module 3 Sept 28, 2007
Word Module 3 Sept 28, 2007Word Module 3 Sept 28, 2007
Word Module 3 Sept 28, 2007Bitsy Griffin
 
Introduction to Network Analysis in Gephi
Introduction to Network Analysis in GephiIntroduction to Network Analysis in Gephi
Introduction to Network Analysis in GephiVictor Blaer
 
Adobe Photoshop CS6 tutorial 2013
Adobe Photoshop CS6 tutorial 2013Adobe Photoshop CS6 tutorial 2013
Adobe Photoshop CS6 tutorial 2013Jessie Doan
 
Presentation Board Layout
Presentation Board Layout Presentation Board Layout
Presentation Board Layout NYCCTfab
 
Working with tables in digital documents
Working with tables in digital documentsWorking with tables in digital documents
Working with tables in digital documentsSanjay Parmar
 
Adobe photoshop cs6
Adobe photoshop cs6Adobe photoshop cs6
Adobe photoshop cs6Ila Azmil
 
Adobe photoshop cs6
Adobe photoshop cs6Adobe photoshop cs6
Adobe photoshop cs6ilaazmil2
 
Adobe photoshop cs6 tutorial
Adobe photoshop cs6 tutorialAdobe photoshop cs6 tutorial
Adobe photoshop cs6 tutorialAgung Yuwono
 
Photoshop pdf
Photoshop pdfPhotoshop pdf
Photoshop pdfKim B
 

Similaire à HTML Lesson 3 (20)

Lesson 10 working with tables
Lesson 10   working with tablesLesson 10   working with tables
Lesson 10 working with tables
 
Lesson 10 working with tables
Lesson 10   working with tablesLesson 10   working with tables
Lesson 10 working with tables
 
Tutorial of microsoft excel 2007
Tutorial of microsoft excel 2007Tutorial of microsoft excel 2007
Tutorial of microsoft excel 2007
 
Tutorial of microsoft excel 2007
Tutorial of microsoft excel 2007Tutorial of microsoft excel 2007
Tutorial of microsoft excel 2007
 
Dreamweaver-Day 01: Property Menus & Tables
Dreamweaver-Day 01: Property Menus & TablesDreamweaver-Day 01: Property Menus & Tables
Dreamweaver-Day 01: Property Menus & Tables
 
HTML Lesson 2
HTML Lesson 2HTML Lesson 2
HTML Lesson 2
 
GC TUG Spring 2024 - Dashboard Actions.pptx
GC TUG Spring 2024 - Dashboard Actions.pptxGC TUG Spring 2024 - Dashboard Actions.pptx
GC TUG Spring 2024 - Dashboard Actions.pptx
 
Tutorial how to use a picture as a presentation slide background
Tutorial   how to use a picture as a presentation slide backgroundTutorial   how to use a picture as a presentation slide background
Tutorial how to use a picture as a presentation slide background
 
How Do I Make The Page Go Side Introducing Web Page Design
How Do I Make The Page Go Side   Introducing Web Page DesignHow Do I Make The Page Go Side   Introducing Web Page Design
How Do I Make The Page Go Side Introducing Web Page Design
 
Subject page art powerpoint
Subject page   art powerpointSubject page   art powerpoint
Subject page art powerpoint
 
Word Module 3 Sept 28, 2007
Word Module 3 Sept 28, 2007Word Module 3 Sept 28, 2007
Word Module 3 Sept 28, 2007
 
Introduction to Network Analysis in Gephi
Introduction to Network Analysis in GephiIntroduction to Network Analysis in Gephi
Introduction to Network Analysis in Gephi
 
Adobe Photoshop CS6 tutorial 2013
Adobe Photoshop CS6 tutorial 2013Adobe Photoshop CS6 tutorial 2013
Adobe Photoshop CS6 tutorial 2013
 
Presentation Board Layout
Presentation Board Layout Presentation Board Layout
Presentation Board Layout
 
Working with tables in digital documents
Working with tables in digital documentsWorking with tables in digital documents
Working with tables in digital documents
 
Unit 14 LO3
Unit 14 LO3Unit 14 LO3
Unit 14 LO3
 
Adobe photoshop cs6
Adobe photoshop cs6Adobe photoshop cs6
Adobe photoshop cs6
 
Adobe photoshop cs6
Adobe photoshop cs6Adobe photoshop cs6
Adobe photoshop cs6
 
Adobe photoshop cs6 tutorial
Adobe photoshop cs6 tutorialAdobe photoshop cs6 tutorial
Adobe photoshop cs6 tutorial
 
Photoshop pdf
Photoshop pdfPhotoshop pdf
Photoshop pdf
 

Plus de TonyC445

Hector SFM 3
Hector SFM 3Hector SFM 3
Hector SFM 3TonyC445
 
Hector SFM 1
Hector SFM 1Hector SFM 1
Hector SFM 1TonyC445
 
Hector SFM 2
Hector SFM 2Hector SFM 2
Hector SFM 2TonyC445
 
SFM Lesson 3
SFM Lesson 3SFM Lesson 3
SFM Lesson 3TonyC445
 
SFM Lesson 2
SFM Lesson 2SFM Lesson 2
SFM Lesson 2TonyC445
 
SFM Lesson 1
SFM Lesson 1SFM Lesson 1
SFM Lesson 1TonyC445
 
Photoshop Lesson 3
Photoshop Lesson 3Photoshop Lesson 3
Photoshop Lesson 3TonyC445
 
HTML Lesson 1
HTML Lesson 1HTML Lesson 1
HTML Lesson 1TonyC445
 
Photoshop Lesson 2
Photoshop Lesson 2Photoshop Lesson 2
Photoshop Lesson 2TonyC445
 
Photoshop Lesson 1
Photoshop Lesson 1Photoshop Lesson 1
Photoshop Lesson 1TonyC445
 

Plus de TonyC445 (10)

Hector SFM 3
Hector SFM 3Hector SFM 3
Hector SFM 3
 
Hector SFM 1
Hector SFM 1Hector SFM 1
Hector SFM 1
 
Hector SFM 2
Hector SFM 2Hector SFM 2
Hector SFM 2
 
SFM Lesson 3
SFM Lesson 3SFM Lesson 3
SFM Lesson 3
 
SFM Lesson 2
SFM Lesson 2SFM Lesson 2
SFM Lesson 2
 
SFM Lesson 1
SFM Lesson 1SFM Lesson 1
SFM Lesson 1
 
Photoshop Lesson 3
Photoshop Lesson 3Photoshop Lesson 3
Photoshop Lesson 3
 
HTML Lesson 1
HTML Lesson 1HTML Lesson 1
HTML Lesson 1
 
Photoshop Lesson 2
Photoshop Lesson 2Photoshop Lesson 2
Photoshop Lesson 2
 
Photoshop Lesson 1
Photoshop Lesson 1Photoshop Lesson 1
Photoshop Lesson 1
 

Dernier

P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxKatherine Villaluna
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptxraviapr7
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesCeline George
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.EnglishCEIPdeSigeiro
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsEugene Lysak
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfMohonDas
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphNetziValdelomar1
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational PhilosophyShuvankar Madhu
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...CaraSkikne1
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxSaurabhParmar42
 
How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17Celine George
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxEduSkills OECD
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapitolTechU
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 

Dernier (20)

P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
 
Finals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quizFinals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quiz
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 Sales
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.
 
The Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George WellsThe Stolen Bacillus by Herbert George Wells
The Stolen Bacillus by Herbert George Wells
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdf
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a Paragraph
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational Philosophy
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptx
 
How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptx
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 

HTML Lesson 3

  • 2. Objective  Learn how to make a borderless table  Learn how to make a border table  Learn how to give a table color or an image background Requirements: • Notepad
  • 3. Why would you want a table? Tables are used very often when making a website. Most of the time people just can’t see them because they are borderless. Tables are great for placing images. They are great for showing a large amount of data, and makes your website look more neat. They are used for many more things.
  • 4. Step 1 Start with the table tag. The table tag looks like the image below. Then use the border attribute. For now set it to 1.
  • 5. Step 2 Next is the table row tag. As you probably guessed it, it is used to make table rows. The tag looks like this <tr>
  • 6. Step 3 The next step is to use the td tag. TD stands for table data. You use this tag to put in the information that you want to put in the table.
  • 7. Step 4 Once you have done that you can add more data or add another row. So far your html should look like something like this.
  • 8. Step 5 Now you can add a color background to these tables or an image background. To do that you must use the background attribute. You can also change the font using the font color attribute.
  • 9. Step 6 Now its time for you to make a borderless table. To do this when you use the border attribute instead of using a border of one you use 0.
  • 10. Step 7 It is best if you do not use a color background because can see the table. Tables are great to place images. So trying placing an image in the left corner of your page.
  • 11. Review Alright now that we are done you should be able to:  Make a bordered table  Make a borderless table  Give a table color
  • 12. Test Now I want you to make me a page with a image in the upper left corner with a borderless table and with a bordered table in the center that includes color in the cells.