{"id":532,"date":"2022-05-25T10:48:10","date_gmt":"2022-05-25T10:48:10","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=532"},"modified":"2023-03-24T13:44:53","modified_gmt":"2023-03-24T13:44:53","slug":"css-tables","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/css-tables\/","title":{"rendered":"CSS Tables"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>Styling Tables CSS<\/strong><\/p>\n\n\n\n<p>Styling tables are so easy in CSS. We can do different things to style the tables. Like putting some borders, changing colors, maybe for different states, etc.<\/p>\n\n\n\n<p>First of all, we have already made a table for demonstration purposes, and we are going to work with that table from now onwards for the example. The table is so easy and straightforward to be made.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"CSS Styling Tables | Lecture 32 | CSS for Beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/ndg75UPL2II?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>To specify the borders of the table, we use the border property for the table, headings, and data cells.<\/p>\n\n\n\n<p>Remember that when we are separating the selectors with a comma, we are grouping them(referred to as grouping of selectors).<\/p>\n\n\n\n<p>You can refer to the below code for understanding the table borders. It is very simple. This is just the CSS from the .css file since you can make a table yourself, but I have given the reference images for the table, to have a look at.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"603\" height=\"102\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Styling-tables.jpg\" alt=\"\" class=\"wp-image-533\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Styling-tables.jpg 603w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Styling-tables-300x51.jpg 300w\" sizes=\"auto, (max-width: 603px) 100vw, 603px\" \/><\/figure>\n<\/div>\n\n\n<p>After you put these borders on your table, your table will look something like this &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"436\" height=\"307\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Styling-tables-1.jpg\" alt=\"\" class=\"wp-image-534\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Styling-tables-1.jpg 436w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Styling-tables-1-300x211.jpg 300w\" sizes=\"auto, (max-width: 436px) 100vw, 436px\" \/><\/figure>\n<\/div>\n\n\n<p>The above example would generate some weird borders if we remove the border-collapse property. But using that property, we can collapse the borders into single borders, So, if you apply that border-collapse property, then the double border will be collapsed into one.<\/p>\n\n\n\n<p>You can try removing the border-collapse property, and this is how your table would look like-<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"456\" height=\"345\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Styling-tables-2.jpg\" alt=\"\" class=\"wp-image-535\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Styling-tables-2.jpg 456w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Styling-tables-2-300x227.jpg 300w\" sizes=\"auto, (max-width: 456px) 100vw, 456px\" \/><\/figure>\n<\/div>\n\n\n<p>Now, we will add some more styles like some background color to the heading and the other rows. You can use the following styles for that &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"467\" height=\"378\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Styling-tables-3.jpg\" alt=\"\" class=\"wp-image-536\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Styling-tables-3.jpg 467w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Styling-tables-3-300x243.jpg 300w\" sizes=\"auto, (max-width: 467px) 100vw, 467px\" \/><\/figure>\n<\/div>\n\n\n<p>If you have a look at the above properties, we have made the table width to 100%, so the table now stretches to the full available width. Also, about the table header, we have given a background color, and also changed the color of the text.<\/p>\n\n\n\n<p>The nth-child pseudo-class matches the elements based on their position among a group of siblings. Once, we are putting odd as a value, due to which it matches the siblings with odd positions, like 1, 3, 5, 7, etc. Also, we have an even value, due to which it matches the even siblings, like the ones with the even positions, like 2, 4, 6, 8, etc. And, you know about hover right? It is doing the same thing here&#8230; like whenever we hover on some row, something happens.<\/p>\n\n\n\n<p>The text that you are seeing just above the table, is the caption. We can set the caption using the caption tag in HTML.<\/p>\n\n\n\n<p>After you apply all these properties, the final look of your table would be something like this &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1012\" height=\"281\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Styling-tables-4.jpg\" alt=\"\" class=\"wp-image-537\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Styling-tables-4.jpg 1012w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Styling-tables-4-300x83.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Styling-tables-4-768x213.jpg 768w\" sizes=\"auto, (max-width: 1012px) 100vw, 1012px\" \/><\/figure>\n<\/div>\n\n\n<p>You can try hovering over the rows and you will see some changes because we have added some styles for the hovering state. You can further modify the table and make it much better.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Styling Tables CSS Styling tables are so easy in CSS. We can do different things to style the tables. Like putting some borders, changing colors, maybe for different states, etc. First of all, we have already made a table for demonstration purposes, and we are going to work with that table from now onwards for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9,166,13],"class_list":{"0":"post-532","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-tables","9":"tag-css-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=532"}],"version-history":[{"count":3,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/532\/revisions"}],"predecessor-version":[{"id":5566,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/532\/revisions\/5566"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}