5/22/2018 CSS Styling Tables

1/3

5/22/2018 CSS Styling Tables

2/3

7/21/2014 CSS Styling Tables

http://www.w3schools.com/css/css_table.asp

Example

table {

width:100%;

}

th {

height:50px;

}

Try it yourself

Table Text Alignment

The text in a table is aligned with the text-align and vertical-align properties.

The text-align property sets the horizontal alignment, like left, right, or center:

Example

td {

text-align:right;

}

Try it yourself

The vertical-align property sets the vertical alignment, like top, bottom, or middle:

Example

td {

height:50px;

vertical-align:bottom;

}

Try it yourself

Table Padding

To control the space between the border and content in a table, use the padding property on td and th elements:

Example

td {

padding:15px;

}

Try it yourself

Table Color

The example below specifies the color of the borders, and the text and background color of th elements:

Example

table, td, th {

border:1px solid green;

}

th {

background-color:green;

color:white;

}

Try it yourself

More Examples

Make a fancy tableThis example demonstrates how to create a fancy table.

http://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancyhttp://www.w3schools.com/css/tryit.asp?filename=trycss_table_colorhttp://www.w3schools.com/css/tryit.asp?filename=trycss_table_paddinghttp://www.w3schools.com/css/tryit.asp?filename=trycss_table_vertical-alignhttp://www.w3schools.com/css/tryit.asp?filename=trycss_table_alignhttp://www.w3schools.com/css/tryit.asp?filename=trycss_table_width

5/22/2018 CSS Styling Tables

3/3

7/21/2014 CSS Styling Tables

http://www.w3schools.com/css/css_table.asp

Previous Next Chapter

Set t he position of the table captionThis example demonstrates how to position the table caption.

REPORT ERROR | HOME | TO P | PRINT | FORUM | ABOUT | ADVERTISE WITH US

Top 10 Tutorials

HTML TutorialHTML5 TutorialCSS TutorialCSS3 TutorialJavaScript TutorialjQuery TutorialSQL Tutorial

PHP TutorialASP.NET TutorialXML Tutorial

Top 10 References

HTML/HTML5 ReferenceCSS 1,2,3 ReferenceCSS 3 Browser SupportJavaScriptHTML DOMXML DOMPHP Reference

jQuery ReferenceASP.NET ReferenceHTML Colors

Top 10 Examples

HTML ExamplesCSS ExamplesJavaScript ExamplesHTML DOM ExamplesPHP ExamplesjQuery ExamplesXML Examples

XML DOM ExamplesASP ExamplesSVG Examples

Web Certificates

HTML CertificateHTML5 CertificateCSS CertificateJavaScript C ertificatejQuery C ertificatePHP C ertificateXML C ertificate

ASP C ertificate

Color Picker

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examplesare constantly reviewed to avoid err ors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use,

cookie and privacy policy. Copyright 1999-2014by Refsnes Data. All Rights Reserved.

http://www.w3schools.com/about/about_copyright.asphttp://www.w3schools.com/about/about_privacy.asphttp://www.w3schools.com/about/about_copyright.asphttp://www.w3schools.com/tags/ref_colorpicker.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/svg/svg_examples.asphttp://www.w3schools.com/asp/asp_examples.asphttp://www.w3schools.com/dom/dom_examples.asphttp://www.w3schools.com/xml/xml_examples.asphttp://www.w3schools.com/jquery/jquery_examples.asphttp://www.w3schools.com/php/php_examples.asphttp://www.w3schools.com/js/js_dom_examples.asphttp://www.w3schools.com/js/js_examples.asphttp://www.w3schools.com/css/css_examples.asphttp://www.w3schools.com/html/html_examples.asphttp://www.w3schools.com/tags/ref_colornames.asphttp://www.w3schools.com/aspnet/webpages_ref_classes.asphttp://www.w3schools.com/jquery/jquery_ref_selectors.asphttp://www.w3schools.com/php/php_ref_array.asphttp://www.w3schools.com/dom/dom_nodetype.asphttp://www.w3schools.com/jsref/default.asphttp://www.w3schools.com/jsref/default.asphttp://www.w3schools.com/cssref/css3_browsersupport.asphttp://www.w3schools.com/cssref/default.asphttp://www.w3schools.com/tags/default.asphttp://www.w3schools.com/xml/default.asphttp://www.w3schools.com/aspnet/default.asphttp://www.w3schools.com/php/default.asphttp://www.w3schools.com/sql/default.asphttp://www.w3schools.com/jquery/default.asphttp://www.w3schools.com/js/default.asphttp://www.w3schools.com/css/css3_intro.asphttp://www.w3schools.com/css/default.asphttp://www.w3schools.com/html/html5_intro.asphttp://www.w3schools.com/html/default.asphttp://www.w3schools.com/about/about_advert.asphttp://www.w3schools.com/about/default.asphttp://www.w3schools.com/forum/default.asphttp://www.w3schools.com/css/css_table.asphttp://www.w3schools.com/default.asphttp://www.w3schools.com/css/css_table.asphttp://www.w3schools.com/http://www.w3schools.com/css/tryit.asp?filename=trycss_table_caption-sidehttp://www.googleadservices.com/pagead/aclk?sa=L&ai=CSYbdjA3NU-v8AtOeuAT2toLYCeutuJUFm-zos3zj8NTbyAEQASCPwO4iULr4ktgCYOXS5oO8DqABjfWI2QPIAQKpAqvBW-BR1VE-4AIAqAMByAOdBKoEoQFP0BpE1cDvM0seWyR7zPFGNOnKiJlKnVZwi64v0bDexhzNcvzHUO9UdUS9AVS4MVLXb-bOZDh85-ZmN5p7B_eU-KDrTd5B7Wu1Vpv4cPJsG0w3gQ-TZbuD0UixqR-zq2dXmEKdq4Abc3PN582szS0FCkgGhBqLZ55MoVXBxjX2z7c5mksASSk2Jl-Beja4pYSdKxQLQBvCaNkIzIDbTuL57uAEAYgGAaAGAoAH24r3Jg&num=1&cid=5GjatQwS1rZT_Xiuk5wjHzPR&sig=AOD64_3aRRozr_-iPDfdm5qA7wiRVVcWnA&client=ca-pub-1993393738408076&adurl=http://www.mercury.co.in%3Futm_source%3Dgoogle%26utm_medium%3Dcpc%26utm_term%3DRemarketing%26utm_campaign%3DMercury%252bRemarketinghttp://www.w3schools.com/css/css_boxmodel.asphttp://www.w3schools.com/css/css_list.asp