SlideShare a Scribd company logo
CSS Tableless Vs Table Layouts Why CSS Tableless Designs Are Better K Sadasivam
CSS Tableless Vs Table Layouts 2 TABLE-Based Layouts Tables have been used in designing layouts for a very long time. Traditionally,  layouts were built using HTML with tables to layout the page structure and content. Tables existed in HTML for one reason:  To display tabular data.
CSS Tableless Vs Table Layouts 3 The problem with using tables File sizes of your pages unnecessarily large This makes redesigns of existing sites and content extremely developer intensive Extremely hard to maintain Visual ConsistencyMuch less accessible
CSS Tableless Vs Table Layouts 4 CSS-based Layouts CSS or Cascading Style Sheets have been used for positioning and layouts The browsers that the vast majority of viewers are using today have good CSS support Coding CSS is easy
CSS Tableless Vs Table Layouts 5 Why CSS Tableless Designs Are Better Widely supported by modern browsers (in some cases Internet Explorer necessitates CSS hacks)  Allows extreme flexibility in positioning Redesigns are easier Increases usability by encouraging liquid design Keeps the HTML/text ratio at a low level thus decreasing load time Allows the display of main content first while the graphics load afterwards Increasing accessibility through CSS
CSS Tableless Vs Table Layouts 6 Example display:inline
CSS Tableless Vs Table Layouts 7 Using FULL CSS makes surfing FASTER
CSS Tableless Vs Table Layouts 8 CSS tableless design is a great method for developing modern layouts and offers many valuable advantages over traditional table based design K Sadasivam

More Related Content

What's hot

Introduction to Oracle Database
Introduction to Oracle DatabaseIntroduction to Oracle Database
Introduction to Oracle Database
puja_dhar
 
Chapter1: NoSQL: It’s about making intelligent choices
Chapter1: NoSQL: It’s about making intelligent choicesChapter1: NoSQL: It’s about making intelligent choices
Chapter1: NoSQL: It’s about making intelligent choices
Maynooth University
 
Object Oriented Design
Object Oriented DesignObject Oriented Design
Object Oriented Design
Pramod Parajuli
 
Database Chapter 2
Database Chapter 2Database Chapter 2
Database Chapter 2
shahadat hossain
 
Trends in Database Management
Trends in Database ManagementTrends in Database Management
Trends in Database Management
Marlon Jamera
 
Chapter-2 Database System Concepts and Architecture
Chapter-2 Database System Concepts and ArchitectureChapter-2 Database System Concepts and Architecture
Chapter-2 Database System Concepts and Architecture
Kunal Anand
 
Erd practice exercises
Erd practice exercisesErd practice exercises
Erd practice exercises
Jennifer Polack
 
Elaboration and domain model
Elaboration and domain modelElaboration and domain model
Elaboration and domain model
Vignesh Saravanan
 
Elmasri Navathe DBMS Unit-1 ppt
Elmasri Navathe DBMS Unit-1 pptElmasri Navathe DBMS Unit-1 ppt
Elmasri Navathe DBMS Unit-1 ppt
AbhinavPandey274499
 
information retrieval Techniques and normalization
information retrieval Techniques and normalizationinformation retrieval Techniques and normalization
information retrieval Techniques and normalization
Ameenababs
 
Database security
Database securityDatabase security
Database security
CAS
 
Ooad
OoadOoad
CS8791 Cloud Computing - Question Bank
CS8791 Cloud Computing - Question BankCS8791 Cloud Computing - Question Bank
CS8791 Cloud Computing - Question Bank
pkaviya
 
Deductive databases
Deductive databasesDeductive databases
Deductive databases
Dabbal Singh Mahara
 
OODM-object oriented data model
OODM-object oriented data modelOODM-object oriented data model
OODM-object oriented data model
AnilPokhrel7
 
Grasp patterns and its types
Grasp patterns and its typesGrasp patterns and its types
Grasp patterns and its types
Syed Hassan Ali
 
data warehouse , data mart, etl
data warehouse , data mart, etldata warehouse , data mart, etl
data warehouse , data mart, etl
Aashish Rathod
 
Generalization and specialization
Generalization and specializationGeneralization and specialization
Generalization and specialization
Knowledge Center Computer
 
DDBMS Paper with Solution
DDBMS Paper with SolutionDDBMS Paper with Solution
DDBMS Paper with Solution
Gyanmanjari Institute Of Technology
 
Mutimedia databases
Mutimedia databasesMutimedia databases
Mutimedia databases
Spoorthi Sham
 

What's hot (20)

Introduction to Oracle Database
Introduction to Oracle DatabaseIntroduction to Oracle Database
Introduction to Oracle Database
 
Chapter1: NoSQL: It’s about making intelligent choices
Chapter1: NoSQL: It’s about making intelligent choicesChapter1: NoSQL: It’s about making intelligent choices
Chapter1: NoSQL: It’s about making intelligent choices
 
Object Oriented Design
Object Oriented DesignObject Oriented Design
Object Oriented Design
 
Database Chapter 2
Database Chapter 2Database Chapter 2
Database Chapter 2
 
Trends in Database Management
Trends in Database ManagementTrends in Database Management
Trends in Database Management
 
Chapter-2 Database System Concepts and Architecture
Chapter-2 Database System Concepts and ArchitectureChapter-2 Database System Concepts and Architecture
Chapter-2 Database System Concepts and Architecture
 
Erd practice exercises
Erd practice exercisesErd practice exercises
Erd practice exercises
 
Elaboration and domain model
Elaboration and domain modelElaboration and domain model
Elaboration and domain model
 
Elmasri Navathe DBMS Unit-1 ppt
Elmasri Navathe DBMS Unit-1 pptElmasri Navathe DBMS Unit-1 ppt
Elmasri Navathe DBMS Unit-1 ppt
 
information retrieval Techniques and normalization
information retrieval Techniques and normalizationinformation retrieval Techniques and normalization
information retrieval Techniques and normalization
 
Database security
Database securityDatabase security
Database security
 
Ooad
OoadOoad
Ooad
 
CS8791 Cloud Computing - Question Bank
CS8791 Cloud Computing - Question BankCS8791 Cloud Computing - Question Bank
CS8791 Cloud Computing - Question Bank
 
Deductive databases
Deductive databasesDeductive databases
Deductive databases
 
OODM-object oriented data model
OODM-object oriented data modelOODM-object oriented data model
OODM-object oriented data model
 
Grasp patterns and its types
Grasp patterns and its typesGrasp patterns and its types
Grasp patterns and its types
 
data warehouse , data mart, etl
data warehouse , data mart, etldata warehouse , data mart, etl
data warehouse , data mart, etl
 
Generalization and specialization
Generalization and specializationGeneralization and specialization
Generalization and specialization
 
DDBMS Paper with Solution
DDBMS Paper with SolutionDDBMS Paper with Solution
DDBMS Paper with Solution
 
Mutimedia databases
Mutimedia databasesMutimedia databases
Mutimedia databases
 

Similar to CSS Tableless Vs Table Layouts

Web standards css vs. tables
Web standards   css vs. tablesWeb standards   css vs. tables
Web standards css vs. tables
Threshold
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
Vskills
 
CSS
CSSCSS
Role of css in web design
Role of css in  web designRole of css in  web design
Role of css in web design
PixelCrayons
 
MYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptx
MYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptxMYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptx
MYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptx
ArjayBalberan1
 
Roadmap 01
Roadmap 01Roadmap 01
Roadmap 01
quangnv17071980
 
intro_To_HTML_and__CSS_using_presentation.pptx
intro_To_HTML_and__CSS_using_presentation.pptxintro_To_HTML_and__CSS_using_presentation.pptx
intro_To_HTML_and__CSS_using_presentation.pptx
AsrithaKorupolu
 
Introduction to CSS Class - 1
Introduction to CSS Class - 1Introduction to CSS Class - 1
Introduction to CSS Class - 1
Nouman Baloch
 
Podcast Assignment - 130
Podcast Assignment - 130Podcast Assignment - 130
Podcast Assignment - 130
rbrosius
 
LIS3353 SP12 Week 12
LIS3353 SP12 Week 12LIS3353 SP12 Week 12
LIS3353 SP12 Week 12
Amanda Case
 
Mastering CSS for Backend Developers.pptx
Mastering CSS for Backend Developers.pptxMastering CSS for Backend Developers.pptx
Mastering CSS for Backend Developers.pptx
ewout2
 
Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
wubiederebe1
 
Css introduction
Css   introductionCss   introduction
Css introduction
AbhishekMondal42
 
Web programming css
Web programming cssWeb programming css
Web programming css
Uma mohan
 
Css
CssCss
How to use a Template in Dreamweaver CS3
How to use a Template in Dreamweaver CS3How to use a Template in Dreamweaver CS3
How to use a Template in Dreamweaver CS3
Sutinder Mann
 
Using Templates2
Using Templates2Using Templates2
Using Templates2
Sutinder Mann
 
SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS Implementation
Amey Parab
 
Css home
Css   homeCss   home
Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?
sharjeet
 

Similar to CSS Tableless Vs Table Layouts (20)

Web standards css vs. tables
Web standards   css vs. tablesWeb standards   css vs. tables
Web standards css vs. tables
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
 
CSS
CSSCSS
CSS
 
Role of css in web design
Role of css in  web designRole of css in  web design
Role of css in web design
 
MYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptx
MYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptxMYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptx
MYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptx
 
Roadmap 01
Roadmap 01Roadmap 01
Roadmap 01
 
intro_To_HTML_and__CSS_using_presentation.pptx
intro_To_HTML_and__CSS_using_presentation.pptxintro_To_HTML_and__CSS_using_presentation.pptx
intro_To_HTML_and__CSS_using_presentation.pptx
 
Introduction to CSS Class - 1
Introduction to CSS Class - 1Introduction to CSS Class - 1
Introduction to CSS Class - 1
 
Podcast Assignment - 130
Podcast Assignment - 130Podcast Assignment - 130
Podcast Assignment - 130
 
LIS3353 SP12 Week 12
LIS3353 SP12 Week 12LIS3353 SP12 Week 12
LIS3353 SP12 Week 12
 
Mastering CSS for Backend Developers.pptx
Mastering CSS for Backend Developers.pptxMastering CSS for Backend Developers.pptx
Mastering CSS for Backend Developers.pptx
 
Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
 
Css introduction
Css   introductionCss   introduction
Css introduction
 
Web programming css
Web programming cssWeb programming css
Web programming css
 
Css
CssCss
Css
 
How to use a Template in Dreamweaver CS3
How to use a Template in Dreamweaver CS3How to use a Template in Dreamweaver CS3
How to use a Template in Dreamweaver CS3
 
Using Templates2
Using Templates2Using Templates2
Using Templates2
 
SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS Implementation
 
Css home
Css   homeCss   home
Css home
 
Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?
 

Recently uploaded

Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
HarisZaheer8
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Precisely
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
Edge AI and Vision Alliance
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
LucaBarbaro3
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
Hiike
 

Recently uploaded (20)

Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
AWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptxAWS Cloud Cost Optimization Presentation.pptx
AWS Cloud Cost Optimization Presentation.pptx
 
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their MainframeDigital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
Digital Banking in the Cloud: How Citizens Bank Unlocked Their Mainframe
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
“Temporal Event Neural Networks: A More Efficient Alternative to the Transfor...
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - HiikeSystem Design Case Study: Building a Scalable E-Commerce Platform - Hiike
System Design Case Study: Building a Scalable E-Commerce Platform - Hiike
 

CSS Tableless Vs Table Layouts

  • 1. CSS Tableless Vs Table Layouts Why CSS Tableless Designs Are Better K Sadasivam
  • 2. CSS Tableless Vs Table Layouts 2 TABLE-Based Layouts Tables have been used in designing layouts for a very long time. Traditionally, layouts were built using HTML with tables to layout the page structure and content. Tables existed in HTML for one reason: To display tabular data.
  • 3. CSS Tableless Vs Table Layouts 3 The problem with using tables File sizes of your pages unnecessarily large This makes redesigns of existing sites and content extremely developer intensive Extremely hard to maintain Visual ConsistencyMuch less accessible
  • 4. CSS Tableless Vs Table Layouts 4 CSS-based Layouts CSS or Cascading Style Sheets have been used for positioning and layouts The browsers that the vast majority of viewers are using today have good CSS support Coding CSS is easy
  • 5. CSS Tableless Vs Table Layouts 5 Why CSS Tableless Designs Are Better Widely supported by modern browsers (in some cases Internet Explorer necessitates CSS hacks) Allows extreme flexibility in positioning Redesigns are easier Increases usability by encouraging liquid design Keeps the HTML/text ratio at a low level thus decreasing load time Allows the display of main content first while the graphics load afterwards Increasing accessibility through CSS
  • 6. CSS Tableless Vs Table Layouts 6 Example display:inline
  • 7. CSS Tableless Vs Table Layouts 7 Using FULL CSS makes surfing FASTER
  • 8. CSS Tableless Vs Table Layouts 8 CSS tableless design is a great method for developing modern layouts and offers many valuable advantages over traditional table based design K Sadasivam