SlideShare uma empresa Scribd logo
1 de 11
agenda 	>    The Differencebetweentable templatesand a CSS template > 	Pros and Cons of design layouts with Tables and CSS  (table less) >	Importance of using CSS Layouts -----------------------------------------------------------------------------
Sounds technical?
how Web standards can save our time and money on
Layouts : table vS. Cascading Style sheets Templates - is consist of Tables, CSS, scripts, text, graphics, animations etc. Tables-based template <table> ... </table> CSS Template 		template NOT achieved with Tables
tables for layout What is reason for Tables existence in HTML.? 		To display tabular data border="0“made it possible for designers to have a grid  Usage of tables in templates interfering with building a better moreaccessible, flexible 				    applications / websites
Valid XHTML
Tricky Tables  Blank Layouts
Tricky Tables  Missing tags   <html>…?<tr>…?<td>…? CSS design and positioning difficult?
are Tables flexible ? Possible to create table layouts with percentage widths Nested Tables:  fancy layouts DoTable hurt Search Engine Optimization ? YES! nested tables can hurt SEO as spider has to crawl to index Are they accessible? 	most screen readers read Web pages in the order the way they are displayed Print Table based layouts
The moral learn to use Cascading style sheets to build layouts
Using CSS : What’s in it for me? Make pages load faster Make designs / redesigns more efficient andless time consuming Also helps maintain visual consistencythroughout  a sites / application For better search engine results Making a sites / application  more accessibleto all users And gives you a competitive edge

Mais conteúdo relacionado

Destaque

UMiP by kewang using takahashi method
UMiP by kewang using takahashi methodUMiP by kewang using takahashi method
UMiP by kewang using takahashi methodMu Chun Wang
 
Tablet Kiosks in Healthcare: Increase Patient Care Systems
Tablet Kiosks in Healthcare: Increase Patient Care SystemsTablet Kiosks in Healthcare: Increase Patient Care Systems
Tablet Kiosks in Healthcare: Increase Patient Care SystemsimageHOLDERS
 
Necessity of 32-Bit Controllers
Necessity of 32-Bit ControllersNecessity of 32-Bit Controllers
Necessity of 32-Bit Controllersmohanav
 
English Conversation
English ConversationEnglish Conversation
English Conversationjay6688
 
Presentaciones multimedia
Presentaciones multimediaPresentaciones multimedia
Presentaciones multimediaAinara Pérez
 
VariPOS S :The Fanless POS of Forward Thinking
VariPOS S :The Fanless POS of Forward ThinkingVariPOS S :The Fanless POS of Forward Thinking
VariPOS S :The Fanless POS of Forward ThinkingPoindus Systems Corp
 
Chasis Design
Chasis DesignChasis Design
Chasis Designanjal3753
 
Health care innovation and investment opportunity
Health care innovation and investment opportunity Health care innovation and investment opportunity
Health care innovation and investment opportunity prabhumurthy maduraimuthu
 
Building enclosure design presentation 1
Building enclosure design presentation 1Building enclosure design presentation 1
Building enclosure design presentation 1melanie_bissonnette
 
Mechanical design of mems gyroscopes
Mechanical design of mems gyroscopesMechanical design of mems gyroscopes
Mechanical design of mems gyroscopesAhmed El-Sayed
 
Mobile Me: Programming for Wearables
Mobile Me: Programming for WearablesMobile Me: Programming for Wearables
Mobile Me: Programming for WearablesVictor Hernandez
 

Destaque (17)

Boxster3 sales kit
Boxster3 sales kitBoxster3 sales kit
Boxster3 sales kit
 
Boxster5 sales kit
Boxster5 sales kitBoxster5 sales kit
Boxster5 sales kit
 
UMiP by kewang using takahashi method
UMiP by kewang using takahashi methodUMiP by kewang using takahashi method
UMiP by kewang using takahashi method
 
Tablet Kiosks in Healthcare: Increase Patient Care Systems
Tablet Kiosks in Healthcare: Increase Patient Care SystemsTablet Kiosks in Healthcare: Increase Patient Care Systems
Tablet Kiosks in Healthcare: Increase Patient Care Systems
 
Necessity of 32-Bit Controllers
Necessity of 32-Bit ControllersNecessity of 32-Bit Controllers
Necessity of 32-Bit Controllers
 
English Conversation
English ConversationEnglish Conversation
English Conversation
 
Presentaciones multimedia
Presentaciones multimediaPresentaciones multimedia
Presentaciones multimedia
 
Dream machine
Dream machineDream machine
Dream machine
 
VariPOS S :The Fanless POS of Forward Thinking
VariPOS S :The Fanless POS of Forward ThinkingVariPOS S :The Fanless POS of Forward Thinking
VariPOS S :The Fanless POS of Forward Thinking
 
Chasis Design
Chasis DesignChasis Design
Chasis Design
 
Design
DesignDesign
Design
 
Embedded Systems Projects Ideas
Embedded Systems Projects IdeasEmbedded Systems Projects Ideas
Embedded Systems Projects Ideas
 
Health care innovation and investment opportunity
Health care innovation and investment opportunity Health care innovation and investment opportunity
Health care innovation and investment opportunity
 
Building enclosure design presentation 1
Building enclosure design presentation 1Building enclosure design presentation 1
Building enclosure design presentation 1
 
Ch11
Ch11Ch11
Ch11
 
Mechanical design of mems gyroscopes
Mechanical design of mems gyroscopesMechanical design of mems gyroscopes
Mechanical design of mems gyroscopes
 
Mobile Me: Programming for Wearables
Mobile Me: Programming for WearablesMobile Me: Programming for Wearables
Mobile Me: Programming for Wearables
 

Semelhante a Difference between Table templates

Tables and forms with HTML, CSS
Tables and forms with HTML, CSS  Tables and forms with HTML, CSS
Tables and forms with HTML, CSS Yaowaluck Promdee
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer NotesVskills
 
2009_09_11_Grid960
2009_09_11_Grid9602009_09_11_Grid960
2009_09_11_Grid960LightSpeed
 
CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By PalashPalashBajpai
 
BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014vzaccaria
 
CSS Workflow. Pre & Post
CSS Workflow. Pre & PostCSS Workflow. Pre & Post
CSS Workflow. Pre & PostAnton Dosov
 
Advance Css
Advance CssAdvance Css
Advance Cssvijayta
 
Advance Css 1194323118268797 5
Advance Css 1194323118268797 5Advance Css 1194323118268797 5
Advance Css 1194323118268797 5dharshyamal
 
Blueprint css framework
Blueprint css frameworkBlueprint css framework
Blueprint css frameworkTechsailor
 
Css handouts (recovered)
Css handouts (recovered)Css handouts (recovered)
Css handouts (recovered)haider ali
 
ExampleSiteEvaluationJustification
ExampleSiteEvaluationJustificationExampleSiteEvaluationJustification
ExampleSiteEvaluationJustificationDesarae Veit
 

Semelhante a Difference between Table templates (20)

Slicing the web
Slicing the webSlicing the web
Slicing the web
 
CSS framework
CSS frameworkCSS framework
CSS framework
 
Tables and forms with HTML, CSS
Tables and forms with HTML, CSS  Tables and forms with HTML, CSS
Tables and forms with HTML, CSS
 
Email dssign rules
Email dssign rulesEmail dssign rules
Email dssign rules
 
VAP ppt.pptx
VAP ppt.pptxVAP ppt.pptx
VAP ppt.pptx
 
Using a CSS Framework
Using a CSS FrameworkUsing a CSS Framework
Using a CSS Framework
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
 
2009_09_11_Grid960
2009_09_11_Grid9602009_09_11_Grid960
2009_09_11_Grid960
 
CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By Palash
 
Roadmap 01
Roadmap 01Roadmap 01
Roadmap 01
 
BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014
 
CSS Workflow. Pre & Post
CSS Workflow. Pre & PostCSS Workflow. Pre & Post
CSS Workflow. Pre & Post
 
Advance Css
Advance CssAdvance Css
Advance Css
 
Advance Css 1194323118268797 5
Advance Css 1194323118268797 5Advance Css 1194323118268797 5
Advance Css 1194323118268797 5
 
Css group
Css groupCss group
Css group
 
Css group
Css groupCss group
Css group
 
Css group
Css groupCss group
Css group
 
Blueprint css framework
Blueprint css frameworkBlueprint css framework
Blueprint css framework
 
Css handouts (recovered)
Css handouts (recovered)Css handouts (recovered)
Css handouts (recovered)
 
ExampleSiteEvaluationJustification
ExampleSiteEvaluationJustificationExampleSiteEvaluationJustification
ExampleSiteEvaluationJustification
 

Difference between Table templates

  • 1. agenda > The Differencebetweentable templatesand a CSS template > Pros and Cons of design layouts with Tables and CSS (table less) > Importance of using CSS Layouts -----------------------------------------------------------------------------
  • 3. how Web standards can save our time and money on
  • 4. Layouts : table vS. Cascading Style sheets Templates - is consist of Tables, CSS, scripts, text, graphics, animations etc. Tables-based template <table> ... </table> CSS Template template NOT achieved with Tables
  • 5. tables for layout What is reason for Tables existence in HTML.? To display tabular data border="0“made it possible for designers to have a grid Usage of tables in templates interfering with building a better moreaccessible, flexible applications / websites
  • 7. Tricky Tables Blank Layouts
  • 8. Tricky Tables Missing tags <html>…?<tr>…?<td>…? CSS design and positioning difficult?
  • 9. are Tables flexible ? Possible to create table layouts with percentage widths Nested Tables: fancy layouts DoTable hurt Search Engine Optimization ? YES! nested tables can hurt SEO as spider has to crawl to index Are they accessible? most screen readers read Web pages in the order the way they are displayed Print Table based layouts
  • 10. The moral learn to use Cascading style sheets to build layouts
  • 11. Using CSS : What’s in it for me? Make pages load faster Make designs / redesigns more efficient andless time consuming Also helps maintain visual consistencythroughout a sites / application For better search engine results Making a sites / application more accessibleto all users And gives you a competitive edge

Notas do Editor

  1. A tables-based template is a web template where the layout is based on a grid created with HTML tables (&lt;table&gt; ... &lt;/table&gt;)