html<\/code> file. This file is going to be the one we are putting both HTML and CSS code so as to keep it as simple as possible. However, when considering more complicated webpages with a lot of HTML, I recommend you separate the styling code in a css<\/code> file.<\/p>\n1.1 Setting up the HTML<\/h3>\n
The initial layout consists of creating the basic structure of html we need.<\/p>\n
To do this, let’s first explain what kind of tags do we have for tables in html and what do they mean:<\/p>\n
1. table<\/code> – this tag defines a table<\/strong> in html.
\n2. tr<\/code> – this tag divides the table into table rows<\/strong>.
\n3. td<\/code> – this tags creates the cell, it means table data<\/strong>.
\n4. th<\/code> – this tag creates a table heading<\/strong>.<\/p>\nWith this said, let’s create the basic table structure in html with randomly 3 rows and 3 columns, like below:<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>CSS Tables Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<table>\r\n <tr>\r\n <th><\/th>\r\n <th><\/th> \r\n <th><\/th>\r\n <\/tr>\r\n <tr>\r\n <td><\/td>\r\n <td><\/td> \r\n <td><\/td>\r\n <\/tr>\r\n <tr>\r\n <td><\/td>\r\n <td><\/td> \r\n <td><\/td>\r\n <\/tr>\r\n<\/table>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nAs you can see, we created the table<\/code> tag inside the body<\/code> tag. After this, we added first the rows tag tr<\/code> and inside each row the table data (or cells) with the td<\/code> tag. Notice we also added a table heading row using the th<\/code> tag, in the first row.<\/p>\nBy default, you should not see anything shown in the browser until now, and that is because we only created the table, but did not put there any data or styling, so both information and layout are missing. We’ll add them soon.<\/p>\n
1.2 Understanding the Style Basics<\/h3>\n
Our table needs to be filled, so let’s give it some random information in this example. To give it styling and layout attributes
\nwe create a style<\/code> tag where all the css code is going to be put. To begin, I am giving this table<\/code> two attributes:<\/p>\n1. width<\/code> attribute of 40% (a normal width for having a pleasant view of the table, we will add custom width later)
\n2. border<\/code> attribute of 0.1em\u00a0solid<\/code> to the table<\/code>, th<\/code> and td<\/code> tags.<\/p>\nThe code now looks like this:<\/p>\n
\r\n\t<style type="text\/css">\r\n\t\r\n\ttable {\t\t\r\n\twidth: 40%;\r\n\tborder: 0.1em solid;\t}\r\n\r\n\ttd {\t\r\n\tborder: 0.1em solid;\t}\r\n\r\n\tth {\t\r\n\tborder: 0.1em solid;\t}\r\n\r\n\t<\/style>\r\n<\/pre>\n\r\n\t<table >\r\n\t<tr>\r\n <th>Name<\/th>\r\n <th>Surname<\/th> \r\n <th>Age<\/th>\r\n <\/tr>\r\n <tr>\r\n <td>Fabio<\/td>\r\n <td>Cimo<\/td> \r\n <td>20<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Jasmin<\/td>\r\n <td>Brown<\/td> \r\n <td>18<\/td>\r\n <\/tr>\r\n<\/table>\r\n<\/pre>\nAnd this is what the table in the browser looks like:<\/p>\n![\"First](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/css-table1.jpg\")
<\/a>First Look of the Table View with inital attributes applied.<\/figcaption><\/figure>\nNotice that the table headings are set in a bold<\/strong> style and centered<\/strong> position by default by the browser.<\/p>\nSo remember that whatever you put inside the th<\/code> tag is styled this way everytime, but you can change it.<\/p>\nOther table data, like the cell information is just normal text and aligned left by default.<\/p>\n
You probaby see that every cell has its own surrounding\/separate border and that looks just bad.<\/p>\n
We fix that with the border-collapse:collapse<\/code> attribute given to the table<\/code>.<\/p>\n(We are later in this article going to have a closer look to the border-collapse<\/code> property)<\/p>\nThat eleminates the need for border<\/code> attributes inside the table<\/code> tag.<\/p>\nLets also align all the table data (td<\/code> tag) in the center<\/code>.<\/p>\nNow we have a code that looks like this in the style section:<\/p>\n
\r\n\t<style type="text\/css">\r\n\t\r\n\ttable {\t\t\r\n\twidth: 40%; \/* the 'border' attribute is removed here *\/\r\n\tborder-collapse:collapse }\r\n\r\n\ttd {\t\r\n\tborder: 0.1em solid;\r\n\ttext-align: center;\t}\r\n\r\n\tth {\t\r\n\tborder: 0.1em solid;\r\n\ttext-align: center;\t}\r\n\r\n\t<\/style>\r\n<\/pre>\nThe result in the browser would be:<\/p>\n![\"Table](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/css-table2.jpg\")
<\/a>Table View with ‘text-align’ and ‘border-collapse’ attributes applied.<\/figcaption><\/figure>\nNow we can say we have created a simple table that looks fine. But there are lots of other styles we can apply to make this table look a lot more interesting and attractive.<\/p>\n
2. Modifying Table Elements Styles<\/h2>\n
Up until now, we used a 40% width<\/code> attribute for our table.<\/p>\nNow we will see a more specific way for adjusting the width of the table, defined by the width of every cell.<\/p>\n
2.1 Spacing<\/h3>\n
There are several spacing considerations when talking about table\/row\/cell sizes. Two of them are most popular and shown below.<\/p>\n
1. Set the size of of your table according to the desired width<\/code> of the cells<\/strong> and height<\/code> of the rows<\/strong> like this:<\/p>\n\r\n\t<style type="text\/css">\r\n\t\r\n\ttable {\t\t\r\n\t \/* the 'width: 40%' attribute is removed here *\/\r\n\tborder-collapse:collapse }\r\n\r\n\ttd {\t\r\n\tborder: 0.1em solid; \/* cells have their 'border' attribute *\/\r\n\ttext-align: center;\r\n\twidth: 10em;\t} \/* added cell width *\/\r\n\r\n\tth {\t\r\n\tborder: 0.1em solid; \/* cells have their 'border' attribute *\/\r\n\ttext-align: center;\r\n\twidth: 10em;\t} \/* added cell width *\/\r\n\r\n\ttr {\t\r\n\theight: 2em;\t} \/* added row height *\/\r\n\r\n\r\n\t<\/style>\r\n<\/pre>\nThis would make the cells 10em wide<\/strong> and rows 2em high<\/strong>. And we’d get this view:<\/p>\n![\"Table](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/css-table3.jpg\")
<\/a>Table Width and Spacing using Cells Width and Rows Height<\/figcaption><\/figure>\n2. Set an inner space called padding<\/code> to the cells (and\/or headings of the table) by adding this attribute to the style like this:<\/p>\n\r\n\t<style type="text\/css">\r\n\t\r\n\ttable {\t\t\r\n\tborder: 0.1em solid;\r\n\tborder-collapse:collapse }\r\n\r\n\ttd {\t\r\n\tborder: 0.1em solid;\r\n\ttext-align: center;\r\n\twidth: 10em;\r\n\tpadding: 1em;\t}\t\t\t\t\/* added cell padding to the table data cells *\/\r\n\r\n\tth {\t\r\n\tborder: 0.1em solid;\r\n\ttext-align: center;\r\n\twidth: 10em;\r\n\tpadding: 2em;\t}\t\t\t\t\/* added cell padding to the heading cells *\/\r\n\r\n\ttr {\t\r\n\theight: 2em;\t}\r\n\r\n\r\n\t<\/style>\r\n<\/pre>\nIn this case, I added a 2em<\/strong> padding<\/code> to the heading cells<\/em> and 1em<\/strong> to the data cells<\/em>.<\/p>\n![\"Cell](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/css-table4.jpg\")
<\/a>Cell Spacing using the Padding attribute<\/figcaption><\/figure>\n<\/p>\n
2.2 Border Styling<\/h3>\n
Until now, we have set a 1px solid<\/code> border style for our table. And that is just good.<\/p>\nBut lets see other options and customizations we can apply to the table border.<\/p>\n
dotted<\/code> – dotted border
\ndashed<\/code> – dashed border
\nsolid<\/code> – solid border
\ndouble<\/code> – double border<\/p>\nThe way we apply border styles is as in the code below:<\/p>\n
\r\n\t<style type="text\/css">\r\n\t\r\n\ttable {\t\t\t\t\t\t\r\n\tborder: 0.1em dashed; \/* added different border style: dashed *\/\r\n\tborder-collapse:collapse }\r\n\r\n\ttd {\t\r\n\tborder: 0.1em dashed;\t\t\t\t\/* added different border style: dashed *\/\r\n\ttext-align: center;\r\n\twidth: 5em;\r\n\tpadding: 0.5em;\t}\t\t\t\t\r\n\r\n\tth {\t\r\n\tborder: 0.1em dashed;\t\t\t\t\/* added different border style: dashed *\/\r\n\ttext-align: center;\r\n\twidth: 5em;\r\n\tpadding: 1em;\t}\t\t\t\t\r\n\r\n\ttr {\t\r\n\theight: 1em;\t}\r\n\r\n\r\n\t<\/style>\r\n<\/pre>\nFor the sake of displaying these four styles in one picture, I have reduced the width and padding of the cells.<\/p>\n![\"Fixed](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/css-table5.jpg\")
<\/a>Fixed Border Styles<\/figcaption><\/figure>\nWe can also have combinations of these styles, using the following:<\/p>\n
dotted solid<\/code> which gives a top and bottom style of dotted<\/code> and left and right of solid<\/code>
\ndotted solid double dashed<\/code> which gives a specific style to each border.<\/p>\nAdditionally, borders can have different colors and border-widths than the default by applying:<\/p>\n
1. For the color, the border-color<\/code> attribute or simply adding the color code into the border<\/code> attribute.
\n2. For border-width<\/code> the attribute with the same name or right from the border<\/code> tag.<\/p>\nAll cases are shown below and commented:<\/p>\n
\r\n\t<style type="text\/css">\r\n\t\r\n\ttable {\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n\tborder-collapse: collapse;\t }\r\n\r\n\ttd {\t\r\n\tborder: solid #e74f3b;\t\t\t\t\/* added border color inside the border attribute *\/\r\n\ttext-align: center; \r\n\twidth: 10em;\r\n\tborder-width: 0.2em;\t\t\t\t\/* added border width as a separate attribute *\/\r\n\tpadding: 1em; \t\t\t}\r\n\r\n\r\n\tth {\t\r\n\tborder: 0.2em solid;\t\t\t\t\/* added border width inside the border attribute *\/\r\n\ttext-align: center;\r\n\twidth: 10em;\r\n\tpadding: 1em;\r\n\tborder-color: #329bd7;\t\t}\t\t\/* added border color as a separate attribute *\/\r\n\t\t\t\r\n\r\n\ttr {\t\r\n\theight: 1em;\t}\r\n\r\n\t<\/style>\r\n<\/pre>\nThis is what the table looks like after these two modifications on the css code:<\/p>\n![\"Border](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/css-table6.jpg\")
<\/a>Border Width and Border Color Applied<\/figcaption><\/figure>\n<\/p>\n
2.3 Cell Styling<\/h3>\n
Adding a few more lines into our css<\/code> code will give our cell backgrounds a new look. Let’s remove some of the styling we did before like the border-width<\/em> and border-color<\/em> attributes to have a cleaner table.<\/p>\nIn the code below, I am giving the heading<\/strong> cells a light gray background and data<\/strong> cells a light green background:<\/p>\n\r\n\ttd {\t\r\n\tborder: 0.1em solid;\t\t\t\t\/* resetted to a default of 0.1em width *\/\t\t\r\n\ttext-align: center; \r\n\twidth: 10em;\t\t\t\t\t\r\n\tpadding: 1em;\r\n\tbackground-color: #d8ffc4; \t\t}\t\/* added data cell background color (light green) *\/\r\n\r\n\r\n\tth {\t\r\n\tborder: 0.1em solid;\t\t\t\t\/* resetted to a default of 0.1em width *\/\r\n\ttext-align: center;\r\n\twidth: 10em;\r\n\tpadding: 1em;\r\n\tbackground-color: #ededed; \t\t}\t\/* added heading cell background color (light gray) *\/\r\n<\/pre>\nRefreshing the browser, the result would be:<\/p>\n![\"Table](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/css-table7.jpg\")
<\/a>Table View after adding the ‘background-color’ attribute to the cells<\/figcaption><\/figure>\n<\/p>\n
3. Advanced Layout & Style Customization<\/h2>\n
Even though we have covered a lot until now, there are still some interesting layout and styling changes that might be of great help to our specific cases. So we start with the layout changes we can use.<\/p>\n
3.1 Layout Cases: Border-Collapse Property<\/h3>\n
border-collapse<\/code> – this property specifies whether the browser should control the appearance of adjacent borders that touch each other or whether each cell should maintain its style. It can have two possible values:<\/p>\nborder-collapse:collapse<\/code> and border-collapse:separate<\/code>
\nThe code below shows both cases: (duplicated our table code to have 2 tables in order to show both these two properties):<\/p>\nCSS<\/p>\n
\r\n\t<style type="text\/css">\r\n\t\r\n\ttable.one {\t\t\t\t\t\t\t\t\t \r\n\tborder-collapse: collapse;\t\t\/* added border collapse:collapse to the first table *\/\r\n\tmargin-bottom: 5em;\t}\t\t\t\r\n\r\n\ttable.two {\t\t\t\t\t\t\t\t\t \r\n\tborder-collapse: separate;\t}\t\/* added border collapse:separate to the second table *\/\r\n\t\r\n\tcaption {\r\n\tpadding-bottom: 1em;\t} \/* added caption padding to make it distinctive *\/\r\n\r\n\ttd {\t\r\n\tborder: 0.1em solid;\t\t\t\t\t\t\r\n\ttext-align: center; \r\n\twidth: 10em;\t\t\t\t\t\r\n\tpadding: 1em; \t\t}\t\t\r\n\r\n\tth {\t\r\n\tborder: 0.1em solid;\t\t\t\t\r\n\ttext-align: center;\r\n\twidth: 10em;\r\n\tpadding: 1em;\t\t}\t\t\r\n\t\t\t\r\n\ttr {\t\r\n\theight: 1em;\t}\r\n\r\n\t<\/style>\r\n<\/pre>\nHTML<\/p>\n
\r\n<table class="one">\r\n\t<caption>Collapse Border Example<\/caption> <!-- added table caption -->\r\n\t<tr>\r\n <th>Name<\/th>\r\n <th>Surname<\/th> \r\n <th>Age<\/th>\r\n <\/tr>\r\n <tr>\r\n <td>Fabio<\/td>\r\n <td>Cimo<\/td> \r\n <td>20<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Jasmin<\/td>\r\n <td>Brown<\/td> \r\n <td>18<\/td>\r\n <\/tr>\r\n<\/table>\r\n\r\n\t<table class="two">\r\n\t<caption>Separate Border Example<\/caption>\t<!-- added table caption -->\r\n\t<tr>\r\n <th>Name<\/th>\r\n <th>Surname<\/th> \r\n <th>Age<\/th>\r\n <\/tr>\r\n <tr>\r\n <td>Fabio<\/td>\r\n <td>Cimo<\/td> \r\n <td>20<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Jasmin<\/td>\r\n <td>Brown<\/td> \r\n <td>18<\/td>\r\n <\/tr>\r\n<\/table>\r\n<\/pre>\nIn this example I also added table captions just by adding the caption<\/code> tag under the table<\/code> tag.<\/p>\nAnd referred to captions in css by giving the caption<\/code> property attributes.<\/p>\nYou can also have captions in the top<\/code>, bottom<\/code>, left<\/code> or right<\/code> of the table according to your needs.<\/p>\nYou can achieve this by adding the caption-side<\/code> attribute in your css code under the caption<\/code> class.<\/p>\nThe view we are going to get is this:<\/p>\n![\"Border-Collapse](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/css-table8.jpg\")
<\/a>Border-Collapse Property Cases<\/figcaption><\/figure>\n<\/p>\n
3.2 Layout Cases: Border-Spacing Property<\/h3>\n
border-spacing<\/code> – specifies the distance that separates adjacent cells, borders. It can take one or two values according to the spacing you need on different sides.<\/p>\nThe code below shows both cases:<\/p>\n
\r\n\ttable.one {\t\t\t\t\t\t\t\t\t \r\n\tmargin-bottom: 5em;\t\r\n\tborder-collapse:separate;\t\t\r\n\tborder-spacing: 1em; }\t\t\t\/* added the same top,bottom,right,left border spacing *\/\r\n\r\n\ttable.two {\t\t\r\n\tborder-collapse:separate;\t\t\t\t\t\t\t \r\n\tborder-spacing: 0.5em 3em;\t}\t\/* added different top,bottom and right,left border spacing *\/\r\n<\/pre>\nIn this case, we get the following view:<\/p>\n
![\"Border-Spacing](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/css-table9.jpg\")
<\/a>Border-Spacing Property<\/figcaption><\/figure>
\n<\/p>\n3.3 Layout Cases: Empty-Cells Property<\/h3>\n
empty-cells<\/code> – used to indicate whether a cell without any content should have a border displayed.
\nIt can take 3 values:<\/p>\nshow<\/code> – given this attribute, all empty cells will show.
\nhide<\/code> – given this attribute, all empty cells will hide.
\ninherit<\/code> – given this attribute, all empty cells will by default show.<\/p>\nAll three cases are shown in the code below with the respective comments:<\/p>\n
\r\n\ttable.one {\t\t\t\t\t\t\t\t\t \r\n\tmargin-bottom: 3em;\t\r\n\tborder-collapse:separate;\t\t\r\n\tempty-cells: inherit; }\t\/* added empty-cells property: inherit *\/\r\n\r\n\ttable.two {\t\t\r\n\tmargin-bottom: 3em;\r\n\tborder-collapse:separate;\t\t\t\t\t\t\t \r\n\tempty-cells: show; }\t\t\/* added empty-cells property:show *\/\r\n\t\r\n\ttable.three {\t\t\r\n\tborder-collapse:separate;\t\t\t\t\t\t\t \r\n\tempty-cells: hide; }\t\t\/* added empty-cells property:hide *\/\r\n<\/pre>\nNote that the empty-cells<\/code> property only works when the border-collapse<\/code> attribute is set to sepatare<\/code>.<\/p>\nHere are the 3 results we get:<\/p>\n![\"Empty-Cells](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/css-table10.jpg\")
<\/a>Empty-Cells Property<\/figcaption><\/figure>\nIn this case, to demonstrate the empty-cells property, I removed the first table heading from the html as below:<\/p>\n
\r\n<tr>\r\n <th><\/th> <!-- removed text from here to have an empty cell -->\r\n <th>Surname<\/th> \r\n <th>Age<\/th>\r\n<\/tr>\r\n<\/pre>\n<\/p>\n
3.4 The ‘colspan’ Attribute<\/h3>\n
colspan=\"\"<\/code> – defines the number of columns a cell should span.<\/p>\nThis attribute is given inside the th<\/code> or td<\/code> opening tag in html<\/strong>.<\/p>\nThe number is put inside the quotes. It can be useful when you need different divisions of cells for different rows.<\/p>\n
Application of the colspan<\/code> attribute is as follows:<\/p>\n\r\n<tr>\r\n <th colspan="2"> FULL NAME<\/th> \r\n <!-- removed second th and added a colspan on the first -->\r\n <th>AGE<\/th>\r\n<\/tr>\r\n<!-- other rows here -->\r\n<tr>\r\n <td colspan="2">Average Age<\/td>\r\n <!-- removed second th and added a colspan on the first -->\r\n <td>22<\/td>\r\n<\/tr>\r\n<\/pre>\nIn the browser, the table would looke like this:<\/p>\n