{"id":2610,"date":"2009-04-22T11:55:05","date_gmt":"2009-04-22T18:55:05","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=2610"},"modified":"2015-02-25T19:51:10","modified_gmt":"2015-02-26T02:51:10","slug":"61-basic-table-styling","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/61-basic-table-styling\/","title":{"rendered":"#61: Basic Table Styling with CSS"},"content":{"rendered":"<p>Tables are great. They are perfectly suited for use on the web. That is, <strong>for displaying tabular data!<\/strong> In this screencast we&#8217;ll cover what that actually means, take a look at a table, the markup that creates it, quirks and things-you-should-know. Then we start styling it up with CSS and quickly touch on some jQuery bonus stuff at the end.<\/p>\n<p><strong>Links from Video:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/examples\/CSSTableStyling\/\">View Demo<\/a><\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/html401\/struct\/tables.html\" rel=\"noopener\">W3C on Tables<\/a><\/li>\n<li>Nice tutorial from Veerle on <a href=\"http:\/\/veerle.duoh.com\/blog\/comments\/a_css_styled_table_version_2\/\" rel=\"noopener\">CSS Table Styling<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Tables are great. They are perfectly suited for use on the web. That is, for displaying tabular data! In this screencast we&#8217;ll cover what that actually means, take a look at a table, the markup that creates it, quirks and things-you-should-know. Then we start styling it up with CSS and quickly touch on some jQuery [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":3020,"url":"https:\/\/css-tricks.com\/video-screencasts\/66-table-styling-2-fixed-header-and-highlighting\/","url_meta":{"origin":2610,"position":0},"title":"#66: Table Styling 2, Fixed Header and Highlighting","date":"July 1, 2009","format":false,"excerpt":"Just a couple of quick tricks, from scratch, on coding up tables. We use the proper semantic tags for a table header and then set it to a fixed position so when scrolling the table the header is always visible. Then we implement row AND column highlighting with a bit\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6474,"url":"https:\/\/css-tricks.com\/video-screencasts-5\/","url_meta":{"origin":2610,"position":1},"title":"Video Screencasts","date":"May 28, 2010","format":false,"excerpt":"#80: Regarding Wheel Invention Running time: 19:09 Sometimes \"reinventing the wheel\" is the right way to go. You get control and all the learning that goes into it. Sometimes it is a waste of time and an existing solution will save you time, money, frustration, and it may do a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":335874,"url":"https:\/\/css-tricks.com\/snippets\/css\/form-validation-styling-on-input-focus\/","url_meta":{"origin":2610,"position":2},"title":"Form Validation Styling on Input Focus","date":"March 8, 2021","format":false,"excerpt":"\/* Only show invalid ring while not focused *\/ input:not(:focus):not(:placeholder-shown):invalid { border-color: var(--color-invalid); } input:not(:focus):not(:placeholder-shown):invalid ~ .error-message { display: block; } \/* Only show valid ring while not focused and if a value is entered *\/ \/* :empty won't work here as that targets elements that have no childeren. Therefore\u2026","rel":"","context":"In \":invalid\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":154816,"url":"https:\/\/css-tricks.com\/snippets\/css\/custom-file-input-styling-webkitblink\/","url_meta":{"origin":2610,"position":3},"title":"Custom File Input Styling","date":"October 31, 2013","format":false,"excerpt":"If you're interested in Webkit\/Blink\/Chrome specific styling, there is a proprietary pseudo element to hide, and then use an also non-standard psudeo-on-an-input: <input class=\"custom-file-input\" type=\"file\"> .custom-file-input::-webkit-file-upload-button { visibility: hidden; } .custom-file-input::before { content: 'Select some files'; display: inline-block; background: linear-gradient(top, #f9f9f9, #e3e3e3); border: 1px solid #999; border-radius: 3px; padding: 5px\u2026","rel":"","context":"In \"file input\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376818,"url":"https:\/\/css-tricks.com\/glossary-of-terms-for-theme-json\/","url_meta":{"origin":2610,"position":4},"title":"Glossary of Terms for theme.json","date":"January 31, 2023","format":false,"excerpt":"To kick things off, let\u2019s begin by reviewing a few glossary terms that are important for understanding what the theme.json file is, how it is structured, and how to configure it. We\u2019ll cover examples as we go, but the main goal here is to get familiar with terms that we\u2019ll\u2026","rel":"","context":"In \"json\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376996,"url":"https:\/\/css-tricks.com\/how-the-style-engine-generates-classes\/","url_meta":{"origin":2610,"position":5},"title":"How the Style Engine Generates Classes","date":"February 27, 2023","format":false,"excerpt":"The WordPress Style Engine generates the CSS for a block theme. Why would you want to know how an invisible process like that works? Well, just like writing CSS, you will want to ensure your code is organized and structured so that your styles properly use the CSS Cascade.","rel":"","context":"In \"WordPress\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/2610"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=2610"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/2610\/revisions"}],"predecessor-version":[{"id":155775,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/2610\/revisions\/155775"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=2610"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=2610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}