SlideShare uma empresa Scribd logo
1 de 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.

Mais conteúdo relacionado

Destaque

《昨年は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
 

Destaque (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
 

Semelhante a 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
 

Semelhante a 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
 

Mais 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
 

Mais 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
 

Último

General AI for Medical Educators April 2024
General AI for Medical Educators April 2024General AI for Medical Educators April 2024
General AI for Medical Educators April 2024Janet Corral
 
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
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...christianmathematics
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...fonyou31
 
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
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...EduSkills OECD
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphThiyagu K
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationnomboosow
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104misteraugie
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfDisha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfchloefrazer622
 
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
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...Sapna Thakur
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 

Último (20)

General AI for Medical Educators April 2024
General AI for Medical Educators April 2024General AI for Medical Educators April 2024
General AI for Medical Educators April 2024
 
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
 
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
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
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
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
Ecosystem Interactions Class Discussion Presentation in Blue Green Lined Styl...
 
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
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
Presentation by Andreas Schleicher Tackling the School Absenteeism Crisis 30 ...
 
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot GraphZ Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Disha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdfDisha NEET Physics Guide for classes 11 and 12.pdf
Disha NEET Physics Guide for classes 11 and 12.pdf
 
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
 
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
BAG TECHNIQUE Bag technique-a tool making use of public health bag through wh...
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 

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.