{"id":1350,"date":"2008-02-20T00:00:14","date_gmt":"2008-02-20T05:00:14","guid":{"rendered":"http:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css"},"modified":"2008-02-20T09:19:22","modified_gmt":"2008-02-20T14:19:22","slug":"styling-tables-using-css","status":"publish","type":"post","link":"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css","title":{"rendered":"Styling Tables Using CSS"},"content":{"rendered":"

This is part two of our table tutorial. In part one I explain why you should still use tables and when to use them. No we will apply some style to those ugly tables using CSS. If you haven\u2019t created the table yet please follow the \u201cHow and Why You Should Still Use Tables\u201d tutorial. <\/p>\n

This is the table we will be creating in this tutorial
\nStyling Tables Using CSS<\/p>\n

Now we are going to need to finish that table.htm file by making it into a proper HTML file. First we will add the open and close HTML tags. Also make sure that you remove the border=\u201d1\u201d setting from the table tag. We will now be using CSS to set the border style.<\/p>\n

\r\n<html>\r\n\r\n<table>\r\n\r\n  <tr>\r\n\r\n  <th>First Name<\/th>\r\n  <th>Last name<\/th>\r\n  <th>Age<\/th>\r\n\r\n  <\/tr>\r\n\r\n  <tr>\r\n\r\n    <td>John<\/td>\r\n    <td>Ward<\/td>\r\n    <td>21<\/td>\r\n\r\n  <\/tr>\r\n\r\n  <tr>\r\n\r\n    <td>Mike<\/td>\r\n    <td>Maguire<\/td>\r\n    <td>21<\/td>\r\n\r\n  <\/tr>\r\n\r\n  <tr>\r\n\r\n    <td>Sara<\/td>\r\n    <td>Lee<\/td>\r\n    <td>61<\/td>\r\n\r\n  <\/tr>\r\n\r\n  <tr>\r\n\r\n    <td>Walter<\/td>\r\n    <td>Reed<\/td>\r\n    <td>1<\/td>\r\n\r\n  <\/tr>\r\n\r\n<\/table>\r\n<\/html>\r\n <\/pre>\n
Then we will define the body section. The body section is where all of the page content go.<\/p>\n
\r\n<html>\r\n\r\n<body>\r\n\r\n<table>\r\n\r\n  <tr>\r\n\r\n  <th>First Name<\/th>\r\n  <th>Last name<\/th>\r\n  <th>Age<\/th>\r\n\r\n  <\/tr>\r\n\r\n  <tr>\r\n\r\n    <td>John<\/td>\r\n    <td>Ward<\/td>\r\n    <td>21<\/td>\r\n\r\n  <\/tr>\r\n\r\n  <tr>\r\n\r\n    <td>Mike<\/td>\r\n    <td>Maguire<\/td>\r\n    <td>21<\/td>\r\n\r\n  <\/tr>\r\n\r\n  <tr>\r\n\r\n    <td>Sara<\/td>\r\n    <td>Lee<\/td>\r\n    <td>61<\/td>\r\n\r\n  <\/tr>\r\n\r\n  <tr>\r\n\r\n    <td>Walter<\/td>\r\n    <td>Reed<\/td>\r\n    <td>1<\/td>\r\n\r\n  <\/tr>\r\n\r\n<\/table>\r\n<\/body>\r\n<\/html>\r\n <\/pre>\n
Finally we will add the head section. The head section contains the page title that is displayed in the browser.<\/p>\n
\r\n<html>\r\n\r\n<head>\r\n\r\n<title>Styling Tables with CSS<\/title>\r\n\r\n<\/head>\r\n\r\n<table>\r\n\r\n  <tr>\r\n\r\n  <th>First Name<\/th>\r\n  <th>Last name<\/th>\r\n  <th>Age<\/th>\r\n\r\n  <\/tr>\r\n\r\n  <tr>\r\n\r\n    <td>John<\/td>\r\n    <td>Ward<\/td>\r\n    <td>21<\/td>\r\n\r\n  <\/tr>\r\n\r\n  <tr>\r\n\r\n    <td>Mike<\/td>\r\n    <td>Maguire<\/td>\r\n    <td>21<\/td>\r\n\r\n  <\/tr>\r\n\r\n  <tr>\r\n\r\n    <td>Sara<\/td>\r\n    <td>Lee<\/td>\r\n    <td>61<\/td>\r\n\r\n  <\/tr>\r\n\r\n  <tr>\r\n\r\n    <td>Walter<\/td>\r\n    <td>Reed<\/td>\r\n    <td>1<\/td>\r\n\r\n  <\/tr>\r\n\r\n<\/table>\r\n<\/html>\r\n <\/pre>\n
For the rest of this tutorial we are only going to show the head section of the file, since this is where we will add the CSS code. CSS code goes in style tags when you are including it in the header of an HTML. You will also enclose it in the comment tags like below.<\/p>\n
\r\n<html>\r\n\r\n<head>\r\n\r\n<title>Styling Tables with CSS<\/title>\r\n\r\n<style type="text\/css">\r\n<!--\r\n\r\n\r\n-->\r\n<\/style>\r\n\r\n<\/head>\r\n<\/pre>\n
Now we can start to apply some styling to the table. First we will define the table tag. CSS always using the tag name follow by { }. The style for the table element will be inside the { } tags.<\/p>\n
\r\n<html>\r\n\r\n<head>\r\n\r\n<title>Styling Tables with CSS<\/title>\r\n\r\n<style type="text\/css">\r\n<!--\r\ntable {\r\n\t\r\n}\r\n-->\r\n<\/style>\r\n\r\n<\/head>\r\n<\/pre>\n
We are going to give our table a border spacing of 0. Then we set the border-collapse to collapse. This causes the table to have a single lime for a border, rather than the double lines that appear in part 1. Last I am setting a static width of 250px to the table.<\/p>\n
\r\n<style type="text\/css">\r\n<!--\r\ntable{\r\n    border-spacing: 0px;\r\n    border-collapse: collapse;\r\n    width: 250px;\r\n}\t\r\n-->\r\n<\/style>\r\n<\/pre>\n
Next we will style the table headers. They were defined with the TH tag. As you can see we align the text in the cells to be centered and we make the font bold by adjusting the font weight. <\/p>\n
\r\n<style type="text\/css">\r\n<!--\r\ntable{\r\n    border-spacing: 0px;\r\n    border-collapse: collapse;\r\n    width: 250px;\r\n}\r\nth {\r\n    text-align: center;\r\n    font-weight: bold;\r\n}\r\n-->\r\n<\/style>\r\n<\/pre>\n
We will add a 2px padding to the cell. That means that there will be an extra two pixels added outside of the cell. This will be the same color as the background. <\/p>\n
\r\n<style type="text\/css">\r\n<!--\r\ntable{\r\n    border-spacing: 0px;\r\n    border-collapse: collapse;\r\n    width: 250px;\r\n}\r\nth {\r\n    text-align: center;\r\n    font-weight: bold;\r\n    padding: 2px;\r\n}\r\n-->\r\n<\/style>\r\n<\/pre>\n
Next we set the cell border properties. Our border is going to be two pixels thick, solid, and white in color.<\/p>\n
\r\n<style type="text\/css">\r\n<!--\r\ntable{\r\n    border-spacing: 0px;\r\n    border-collapse: collapse;\r\n    width: 250px;\r\n}\r\nth {\r\n    text-align: center;\r\n    font-weight: bold;\r\n    padding: 2px;\r\n    border: 2px solid #FFFFFF;\r\n    background: #4a70aa;\r\n    color: #FFFFFF;\r\n}\r\n-->\r\n<\/style>\r\n<\/pre>\n
Finally we will change the background color to a blue, and we change the font color to white.<\/p>\n
\r\n<style type="text\/css">\r\n<!--\r\ntable{\r\n    border-spacing: 0px;\r\n    border-collapse: collapse;\r\n    width: 250px;\r\n}\r\nth {\r\n    text-align: center;\r\n    font-weight: bold;\r\n    padding: 2px;\r\n    border: 2px solid #FFFFFF;\r\n    background: #4a70aa;\r\n    color: #FFFFFF;\r\n}\r\n-->\r\n<\/style>\r\n<\/pre>\n
Our header cells are done now. Your table should look like this.
\nStyling Tables Using CSS<\/p>\n
Looks good but I would like to add some style to the cells. The rest of our table cells are defined with the TD tag, so we will add that to our css. As you can see we apply the same text-align, padding, and border as the header, but for this cell we will give it a light blue\/grey background color. The easiest way to do this is to copy the code from our TH style.<\/p>\n
\r\n<style type="text\/css">\r\n<!--\r\ntable{\r\n    border-spacing: 0px;\r\n    border-collapse: collapse;\r\n    width: 250px;\r\n}\r\nth {\r\n    text-align: center;\r\n    font-weight: bold;\r\n    padding: 2px;\r\n    border: 2px solid #FFFFFF;\r\n    background: #4a70aa;\r\n    color: #FFFFFF;\r\n}\r\ntd {\r\n    text-align: center;\r\n    padding: 2px;\r\n    border: 2px solid #FFFFFF;\r\n    background: #e3f0f7;\r\n}\r\n-->\r\n<\/style>\r\n<\/pre>\n
That is it. Save your file with a .htm extension and open it in Firefox (or you favorite browser) and it should look like this.<\/p>\n
Styling Tables Using CSS<\/p>\n
That is it for the first table styling tutorial. Look for the next tutorial to go over alternating row styles.<\/p>\n","protected":false},"excerpt":{"rendered":"
This is part two of our table tutorial. In part one I explain why you should still use tables and when to use them. No we will apply some style to those ugly tables using CSS. If you haven\u2019t created the table yet please follow the \u201cHow and Why You Should Still Use Tables\u201d tutorial. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[44,30,17],"tags":[],"yoast_head":"\nStyling Tables Using CSS<\/title>\n<meta name=\"description\" content=\"This is part two of our table tutorial. In part one I explain why you should still use tables and when to use them. No we will apply some style to those ugly tables using CSS. If you haven\u2019t created the table yet please follow the \u201cHow and Why You Should Still Use Tables\u201d tutorial.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Johnathan Ward\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/teamtutorials.com\/#website\",\"url\":\"https:\/\/teamtutorials.com\/\",\"name\":\"Team Tutorials\",\"description\":\"Learn something new today\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/teamtutorials.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/02\/styling-tables-using-css-01.jpg\",\"contentUrl\":\"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/02\/styling-tables-using-css-01.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css#webpage\",\"url\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css\",\"name\":\"Styling Tables Using CSS\",\"isPartOf\":{\"@id\":\"https:\/\/teamtutorials.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css#primaryimage\"},\"datePublished\":\"2008-02-20T05:00:14+00:00\",\"dateModified\":\"2008-02-20T14:19:22+00:00\",\"author\":{\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\"},\"description\":\"This is part two of our table tutorial. In part one I explain why you should still use tables and when to use them. No we will apply some style to those ugly tables using CSS. If you haven\\u2019t created the table yet please follow the \\u201cHow and Why You Should Still Use Tables\\u201d tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/teamtutorials.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Styling Tables Using CSS\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9\",\"name\":\"Johnathan Ward\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/teamtutorials.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r\",\"caption\":\"Johnathan Ward\"},\"description\":\"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.\",\"sameAs\":[\"http:\/\/johnathanward.com\",\"https:\/\/twitter.com\/spyderman4g63\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Styling Tables Using CSS","description":"This is part two of our table tutorial. In part one I explain why you should still use tables and when to use them. No we will apply some style to those ugly tables using CSS. If you haven\u2019t created the table yet please follow the \u201cHow and Why You Should Still Use Tables\u201d tutorial.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css","twitter_misc":{"Written by":"Johnathan Ward","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/teamtutorials.com\/#website","url":"https:\/\/teamtutorials.com\/","name":"Team Tutorials","description":"Learn something new today","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/teamtutorials.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css#primaryimage","inLanguage":"en-US","url":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/02\/styling-tables-using-css-01.jpg","contentUrl":"http:\/\/teamtutorials.com\/wp-content\/uploads\/2008\/02\/styling-tables-using-css-01.jpg"},{"@type":"WebPage","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css#webpage","url":"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css","name":"Styling Tables Using CSS","isPartOf":{"@id":"https:\/\/teamtutorials.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css#primaryimage"},"datePublished":"2008-02-20T05:00:14+00:00","dateModified":"2008-02-20T14:19:22+00:00","author":{"@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9"},"description":"This is part two of our table tutorial. In part one I explain why you should still use tables and when to use them. No we will apply some style to those ugly tables using CSS. If you haven\u2019t created the table yet please follow the \u201cHow and Why You Should Still Use Tables\u201d tutorial.","breadcrumb":{"@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/teamtutorials.com\/web-development-tutorials\/styling-tables-using-css#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/teamtutorials.com\/"},{"@type":"ListItem","position":2,"name":"Styling Tables Using CSS"}]},{"@type":"Person","@id":"https:\/\/teamtutorials.com\/#\/schema\/person\/3abea1fc71644afe035403357450b9d9","name":"Johnathan Ward","image":{"@type":"ImageObject","@id":"https:\/\/teamtutorials.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93d667fe5dc6df5c722e0df5eac14d40?s=96&d=mm&r=r","caption":"Johnathan Ward"},"description":"Johnathan Ward is an experienced developer and consultant that writes tutorials to help other developers. In his day job, he is an IBM Watson Consultant with several years of experience deploying and customizing Watson Explorer solutions.","sameAs":["http:\/\/johnathanward.com","https:\/\/twitter.com\/spyderman4g63"]}]}},"_links":{"self":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/1350"}],"collection":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/comments?post=1350"}],"version-history":[{"count":0,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/posts\/1350\/revisions"}],"wp:attachment":[{"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/media?parent=1350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/categories?post=1350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teamtutorials.com\/wp-json\/wp\/v2\/tags?post=1350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}