SlideShare une entreprise Scribd logo
1  sur  12
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

An Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfAn Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfSanaAli374401
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxiammrhaywood
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
Gardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch LetterGardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch LetterMateoGardella
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...
SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...
SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...KokoStevan
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDThiyagu K
 
Making and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfMaking and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfChris Hunter
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxAreebaZafar22
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docxPoojaSen20
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingTechSoup
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactPECB
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.pptRamjanShidvankar
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxVishalSingh1417
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Celine George
 

Dernier (20)

An Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfAn Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdf
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Gardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch LetterGardella_PRCampaignConclusion Pitch Letter
Gardella_PRCampaignConclusion Pitch Letter
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...
SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...
SECOND SEMESTER TOPIC COVERAGE SY 2023-2024 Trends, Networks, and Critical Th...
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
Making and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfMaking and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdf
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docx
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in 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.