SlideShare una empresa de Scribd logo
1 de 8
Table Styling
Using CSS to Style Tables: ,[object Object],[object Object]
Common Table Styles: You are already familiar with the first four styles listed here.  We have used them for other elements, such as <p>, <h1>, <li>, and <a>. Text alignment in table, row or cell. text-align Border of table, row, or cell. border Padding of table, row, or cell. padding Style Description width Width of table or row. background-color Background color of table, row or cell. color Color of text in table, row, or cell.
More About Borders: ,[object Object],[object Object],[object Object],[object Object],[object Object],Collapses double lines around cells into one line. border-collapse Style Description border-width Width of border around table, row, or cell.  Measured in pixels.  Also available are: thin, medium, and thick.  A value of &quot;0&quot; displays no border. border-color Color of border around table, row, or cell. border-style Type of border to display: solid, dashed, dotted, groove, ridge, inset, outset.
Example Border: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Here we have defined the width of the table, the thickness of the border, the color of the border, and the style of the border. Cell 4 Cell 3 Cell 6 Cell 5 Cell 2 Cell 1
Using the Border Shorthand Property: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],We also have the option to use shorthand when specifying the border properties.  The syntax is  border:border-width border-style border-color; This shorthand can be used only when the border style and color are uniform for top, left, bottom, and right. Cell 4 Cell 3 Cell 6 Cell 5 Cell 2 Cell 1
Using CSS Classes to Style Tables: ,[object Object],[object Object]
Using Classes to Style Tables: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],By alternating the classes &quot;odd&quot; and &quot;even&quot;, we have made it easier for our web visitors to read the table rows. Cell 4 Cell 3 Cell 6 Cell 5 Cell 2 Cell 1

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Tables and Forms in HTML
Tables and Forms in HTMLTables and Forms in HTML
Tables and Forms in HTML
 
Html introduction Part-2
Html introduction Part-2Html introduction Part-2
Html introduction Part-2
 
CSS - LinkedIn
CSS - LinkedInCSS - LinkedIn
CSS - LinkedIn
 
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
 
Tables and Forms in HTML
Tables and Forms in HTMLTables and Forms in HTML
Tables and Forms in HTML
 
Css
CssCss
Css
 
Web forms and html (lect 3)
Web forms and html (lect 3)Web forms and html (lect 3)
Web forms and html (lect 3)
 
TABLE
TABLETABLE
TABLE
 
HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and Forms
 
HTML (Hyper Text Markup Language) by Mukesh
HTML (Hyper Text Markup Language) by MukeshHTML (Hyper Text Markup Language) by Mukesh
HTML (Hyper Text Markup Language) by Mukesh
 
HTML Table
HTML TableHTML Table
HTML Table
 
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)
 
Html Table
Html TableHtml Table
Html Table
 
Week3 css
Week3 cssWeek3 css
Week3 css
 
HTML Tables
HTML TablesHTML Tables
HTML Tables
 
HTML [Basic] --by Abdulla-al Baset
HTML [Basic] --by Abdulla-al BasetHTML [Basic] --by Abdulla-al Baset
HTML [Basic] --by Abdulla-al Baset
 
Tables
TablesTables
Tables
 
Css
CssCss
Css
 

Destacado

CSS Tableless Vs Table Layouts
CSS Tableless Vs Table LayoutsCSS Tableless Vs Table Layouts
CSS Tableless Vs Table Layouts
krishsadasivam
 
Industrial employment standing_orders_act_1946
Industrial employment standing_orders_act_1946Industrial employment standing_orders_act_1946
Industrial employment standing_orders_act_1946
Ravi Jaiswal
 
Questionaire all-students-2011
Questionaire all-students-2011Questionaire all-students-2011
Questionaire all-students-2011
Mihajlo Gajic
 
Solar energy
Solar energySolar energy
Solar energy
Eva Vovka
 
6.2 css link styling
6.2 css link styling6.2 css link styling
6.2 css link styling
Bulldogs83
 
Questionnaire results students-teachers-zr
Questionnaire results students-teachers-zrQuestionnaire results students-teachers-zr
Questionnaire results students-teachers-zr
Mihajlo Gajic
 
Hydroelectricity
HydroelectricityHydroelectricity
Hydroelectricity
Eva Vovka
 

Destacado (20)

CSS Tableless Vs Table Layouts
CSS Tableless Vs Table LayoutsCSS Tableless Vs Table Layouts
CSS Tableless Vs Table Layouts
 
Industrial employment standing_orders_act_1946
Industrial employment standing_orders_act_1946Industrial employment standing_orders_act_1946
Industrial employment standing_orders_act_1946
 
Questionaire all-students-2011
Questionaire all-students-2011Questionaire all-students-2011
Questionaire all-students-2011
 
Fstpt10 agung-rev
Fstpt10 agung-revFstpt10 agung-rev
Fstpt10 agung-rev
 
Solar energy
Solar energySolar energy
Solar energy
 
Company profile Batikbumi.com
Company profile Batikbumi.comCompany profile Batikbumi.com
Company profile Batikbumi.com
 
Shpogy secondary school
Shpogy secondary school  Shpogy secondary school
Shpogy secondary school
 
Dövrlər
DövrlərDövrlər
Dövrlər
 
Marathon Oil Corp. Industry Profile
Marathon Oil Corp. Industry ProfileMarathon Oil Corp. Industry Profile
Marathon Oil Corp. Industry Profile
 
6.2 css link styling
6.2 css link styling6.2 css link styling
6.2 css link styling
 
Questionnaire results students-teachers-zr
Questionnaire results students-teachers-zrQuestionnaire results students-teachers-zr
Questionnaire results students-teachers-zr
 
Global warming
Global warmingGlobal warming
Global warming
 
Global dimension in social sciences subjects in formal
Global dimension in social sciences subjects in formalGlobal dimension in social sciences subjects in formal
Global dimension in social sciences subjects in formal
 
Enviornmental injustice
Enviornmental injusticeEnviornmental injustice
Enviornmental injustice
 
Photo album
Photo albumPhoto album
Photo album
 
Bing webmaster tools
Bing webmaster toolsBing webmaster tools
Bing webmaster tools
 
Fashion than and_now
Fashion than and_nowFashion than and_now
Fashion than and_now
 
Πρέγκλερ Κάρολος - Migato - Social Media World 2013
Πρέγκλερ Κάρολος - Migato - Social Media World 2013Πρέγκλερ Κάρολος - Migato - Social Media World 2013
Πρέγκλερ Κάρολος - Migato - Social Media World 2013
 
Hydroelectricity
HydroelectricityHydroelectricity
Hydroelectricity
 
Squirrels' day
Squirrels' daySquirrels' day
Squirrels' day
 

Similar a 4.3 table styling (20)

CSS
CSSCSS
CSS
 
Css.prabu
Css.prabuCss.prabu
Css.prabu
 
Web Design Course: CSS lecture 3
Web Design Course: CSS lecture 3Web Design Course: CSS lecture 3
Web Design Course: CSS lecture 3
 
HTML Tables in Omeka
HTML Tables in OmekaHTML Tables in Omeka
HTML Tables in Omeka
 
Css
CssCss
Css
 
Html tut 04
Html tut 04Html tut 04
Html tut 04
 
Css
CssCss
Css
 
Css 1
Css 1Css 1
Css 1
 
CSS
CSSCSS
CSS
 
L4 Fashioning Text Styles and Colors
L4   Fashioning Text Styles and ColorsL4   Fashioning Text Styles and Colors
L4 Fashioning Text Styles and Colors
 
WEP4 and 5.pptx
WEP4 and 5.pptxWEP4 and 5.pptx
WEP4 and 5.pptx
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
Kick start @ css
Kick start @ cssKick start @ css
Kick start @ css
 
css-note.pptx
css-note.pptxcss-note.pptx
css-note.pptx
 
CSS
CSSCSS
CSS
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
CSS.pptx
CSS.pptxCSS.pptx
CSS.pptx
 
Css
CssCss
Css
 

Más de Bulldogs83

7.2 external style sheets
7.2 external style sheets7.2 external style sheets
7.2 external style sheets
Bulldogs83
 
7.1 xhtml validation
7.1 xhtml validation7.1 xhtml validation
7.1 xhtml validation
Bulldogs83
 
6.1 special characters
6.1 special characters6.1 special characters
6.1 special characters
Bulldogs83
 
5.2 nesting and floating elements
5.2 nesting and floating elements5.2 nesting and floating elements
5.2 nesting and floating elements
Bulldogs83
 
5.1 css box model
5.1 css box model5.1 css box model
5.1 css box model
Bulldogs83
 
4.2 css classes
4.2 css classes4.2 css classes
4.2 css classes
Bulldogs83
 
4.1 advanced tables
4.1 advanced tables4.1 advanced tables
4.1 advanced tables
Bulldogs83
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
Bulldogs83
 
3.1 xhtml tables
3.1 xhtml tables3.1 xhtml tables
3.1 xhtml tables
Bulldogs83
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
Bulldogs83
 
2.1 adding images
2.1 adding images2.1 adding images
2.1 adding images
Bulldogs83
 
1.4 adding comments copy (2)
1.4 adding comments   copy (2)1.4 adding comments   copy (2)
1.4 adding comments copy (2)
Bulldogs83
 
1.4 adding comments copy (2)
1.4 adding comments   copy (2)1.4 adding comments   copy (2)
1.4 adding comments copy (2)
Bulldogs83
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
Bulldogs83
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
Bulldogs83
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
Bulldogs83
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
Bulldogs83
 
1.1 xhtml basics
1.1 xhtml basics1.1 xhtml basics
1.1 xhtml basics
Bulldogs83
 

Más de Bulldogs83 (18)

7.2 external style sheets
7.2 external style sheets7.2 external style sheets
7.2 external style sheets
 
7.1 xhtml validation
7.1 xhtml validation7.1 xhtml validation
7.1 xhtml validation
 
6.1 special characters
6.1 special characters6.1 special characters
6.1 special characters
 
5.2 nesting and floating elements
5.2 nesting and floating elements5.2 nesting and floating elements
5.2 nesting and floating elements
 
5.1 css box model
5.1 css box model5.1 css box model
5.1 css box model
 
4.2 css classes
4.2 css classes4.2 css classes
4.2 css classes
 
4.1 advanced tables
4.1 advanced tables4.1 advanced tables
4.1 advanced tables
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
 
3.1 xhtml tables
3.1 xhtml tables3.1 xhtml tables
3.1 xhtml tables
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
 
2.1 adding images
2.1 adding images2.1 adding images
2.1 adding images
 
1.4 adding comments copy (2)
1.4 adding comments   copy (2)1.4 adding comments   copy (2)
1.4 adding comments copy (2)
 
1.4 adding comments copy (2)
1.4 adding comments   copy (2)1.4 adding comments   copy (2)
1.4 adding comments copy (2)
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
 
1.3 creating links
1.3 creating links1.3 creating links
1.3 creating links
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
 
1.2 elements and attributes copy (3)
1.2 elements and attributes   copy (3)1.2 elements and attributes   copy (3)
1.2 elements and attributes copy (3)
 
1.1 xhtml basics
1.1 xhtml basics1.1 xhtml basics
1.1 xhtml basics
 

Último

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
QucHHunhnh
 

Último (20)

Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
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
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
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...
 
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 ...
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docx
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
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
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.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
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and ModeMeasures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
 
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
 
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
 
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
 
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
 

4.3 table styling

  • 2.
  • 3. Common Table Styles: You are already familiar with the first four styles listed here. We have used them for other elements, such as <p>, <h1>, <li>, and <a>. Text alignment in table, row or cell. text-align Border of table, row, or cell. border Padding of table, row, or cell. padding Style Description width Width of table or row. background-color Background color of table, row or cell. color Color of text in table, row, or cell.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.