{"id":14765,"date":"2020-04-17T12:36:58","date_gmt":"2020-04-17T19:36:58","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14765"},"modified":"2023-12-01T02:41:06","modified_gmt":"2023-12-01T10:41:06","slug":"css-tables","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-tables\/","title":{"rendered":"How to Style HTML Tables with CSS"},"content":{"rendered":"\n

Early on in web development, HTML tables were very basic and lacked extensive styling options. Today, however, most tables are styled to create a more aesthetically pleasing and functional experience for users.
<\/p>\n\n\n\n

CSS provides a number of attributes for styling tables. These attributes allow you to\u2014among other things\u2014separate cells in a table, specify table borders, and specify the width and height of a table.
<\/p>\n\n\n\n

This tutorial will discuss, with examples, how to style a table using CSS. By the end of this tutorial, you\u2019ll be an expert at it.
<\/p>\n\n\n\n

HTML Tables<\/h2>\n\n\n\n

HTML code defines the structure of tables. You use the <table> tag to define a table. The <tr>, <th>, and <td> tags specify rows, table headers, and content cells, respectively. 
<\/p>\n\n\n\n

Let\u2019s look at an example of an HTML table. In the below example, we have a table that lists the top five books on the New York Times<\/em> best sellers list for the week of March 23, 2020:
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The code for our table is as follows:
<\/p>\n\n\n\n

<table>\n  <tr>\n    <th>Book Name<\/th>\n    <th>Author<\/th>\n    <th>Weeks on List<\/th>\n  <\/tr>\n  <tr>\n    <td>The Mirror & the Light<\/td>\n    <td>Hilary Mantel<\/td>\n    <td>New this Week<\/td>\n  <\/tr>\n  <tr>\n    <td>Journey of the Pharaohs<\/td>\n    <td>Clive Cussler and Graham Brown<\/td>\n    <td>New this Week<\/td>\n  <\/tr>\n  <tr>\n    <td>Where the Crawdads Sing<\/td>\n    <td>Delia Owens<\/td>\n    <td>79<\/td>\n  <\/tr>\n  <tr>\n    <td>American Dirt<\/td>\n    <td>Jeanine Cummings<\/td>\n    <td>8<\/td>\n  <\/tr>\n  <tr>\n    <td>Little Fires Everywhere<\/td>\n    <td>Celeste Ng<\/td>\n    <td>57<\/td>\n  <\/tr>\n<\/table>\n<\/pre><\/div>\n\n\n\n
This table includes three columns and six rows, including one header row.
<\/p>\n\n\n\n
CSS Tables<\/h2>\n\n\n\n
CSS is used to style tables. While the table above displays data in an organized way, it is written in plain HTML (there are no styles present). By using CSS, you can make tables more aesthetically pleasing.
<\/p>\n\n\n\n
There are many CSS functions you can use to style a table. Using CSS, you can:<\/p>\n\n\n\n
    \n
  • add borders<\/li>\n\n\n\n
  • collapse borders<\/li>\n\n\n\n
  • adjust border spacing<\/li>\n\n\n\n
  • adjust the width and height of a table<\/li>\n\n\n\n
  • add padding<\/li>\n\n\n\n
  • align text horizontally<\/li>\n\n\n\n
  • align text vertically<\/li>\n\n\n\n
  • add a mouse-over (hover) feature<\/li>\n\n\n\n
  • define cell colors<\/li>\n\n\n\n
  • define how empty cells will display<\/li>\n<\/ul>\n\n\n\n
    We cover all of these topics in the discussion below.
    <\/p>\n\n\n\n
    Borders<\/h3>\n\n\n\n
    Suppose we want to add borders around the table or around elements within it. 
    <\/p>\n\n\n\n
    To add borders, we can use the border property. Here\u2019s an example that uses the border property to add borders to a table, and its cells, including header cells:
    <\/p>\n\n\n\n
    table, th, td {\n\tborder: 1px black solid;\n}\n<\/pre><\/div>\n\n\n\n
    In our code, we define a solid, 1-pixel-wide, black border. Here\u2019s the result of our code:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    Notice that our table contains double borders. This is because we applied a border to the table itself (<table>), its headers (<th>), and its cells (<td>). To merge double borders into single borders, we can use the border-collapse property.
    <\/p>\n\n\n\n
    Border Collapse<\/h3>\n\n\n\n
    The border-collapse property converts double borders in a table to single borders. The default value of the border-collapse property is collapsed. If the border-collapse property is assigned the value collapse<\/code>, the borders around a table will be collapsed.
    <\/p>\n\n\n\n
    Here\u2019s an example of the border-collapse property in action:
    <\/p>\n\n\n\n
    table {\n\tborder-collapse: collapse;\n}\n<\/pre><\/div>\n\n\n\n
    Our code returns:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Our table and its contents now have a single border.
    <\/p>\n\n\n\n
    Border Spacing<\/h3>\n\n\n\n
    You can use the border-spacing property to set the spacing between cells in a table. The border-spacing property defines the horizontal and vertical spacing between cells\u2014and it does so in that order.
    <\/p>\n\n\n\n
    Here\u2019s an example that uses the border-spacing property on our initial table (the one without collapsed borders):
    <\/p>\n\n\n\n
    table {\n\tborder-spacing: 10px 10px;\n}\n<\/pre><\/div>\n\n\n\n
    Our code returns:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Each of our cells has a 10px spacing on both the horizontal and vertical edges.
    <\/p>\n\n\n\n
    Width and Height<\/h3>\n\n\n\n
    You can specify the width and height of a table and its properties using the width and height attributes.
    <\/p>\n\n\n\n
    Suppose we want the width of our above table\u2014the one with collapsed borders\u2014to be the width of the web page itself. And, let\u2019s suppose we want the height of each table header to be 30 pixels tall. We can do this using the following CSS code:
    <\/p>\n\n\n\n
    table {\n\twidth: 100%;\n}\nth {\n\theight: 30px;\n}\n<\/pre><\/div>\n\n\n\n
    Our code returns:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    As you can see, our table is now the width of the web page. In addition, the column headers in our table are 30 pixels tall.
    <\/p>\n\n\n\n
    Padding<\/h3>\n\n\n\n
    You can use the padding property to add a certain amount of space between the borders of the cells in a table and the contents of those cells. The padding property can be used on the <td> and <th> tags.
    <\/p>\n\n\n\n
    Suppose we want to add a 10 pixel padding around the contents of our table\u2019s cells\u2014including the header cells. We can do so using this code:
    <\/p>\n\n\n\n
    th, td {\n\tpadding: 10px;\n}\n<\/pre><\/div>\n\n\n\n
    Our code returns:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    The contents of each of our table rows and headers now has a 10px padding around all edges.
    <\/p>\n\n\n\n
    Horizontal Text Alignment<\/h3>\n\n\n\n
    You can use the text-align property to horizontally align text stored in a <th> or <td> tag in a table. By default, <th> elements are center aligned and <td> elements are left aligned.
    <\/p>\n\n\n\n
    The text-align attribute\u2019s most commonly used values are:
    <\/p>\n\n\n\n
      \n
    • left, center, right (supported by all browsers except Microsoft Edge and Internet Explorer)<\/li>\n\n\n\n
    • start and end (supported by all browsers except Microsoft Edge and Internet Explorer)<\/li>\n<\/ul>\n\n\n\n
      Suppose we want to center the <td> elements in our table and align the <th> elements to the left of each cell. We can do so using this code:
      <\/p>\n\n\n\n
      th {\n\ttext-align: left;\n}\ntd {\n\ttext-align: center;\n}\n<\/pre><\/div>\n\n\n\n
      Our code returns:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      In this example, we center-aligned non-header cell text and left-aligned header cell text.
      <\/p>\n\n\n\n
      Vertical Text Alignment<\/h3>\n\n\n\n
      The CSS vertical-align property is used to specify the vertical alignment of content in <th> or <td> tags. By default, the value of the vertical-align property is set to middle<\/code>, which means the content is vertically aligned to the middle of the cell.
      <\/p>\n\n\n\n
      Let\u2019s suppose we want to align the text in our <td> cells to the bottom of the cells. We can do so using this code:
      <\/p>\n\n\n\n
      td {\nheight: 40px;\nvertical-align: bottom;\n}\n<\/pre><\/div>\n\n\n\n
      Our code returns:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      In this example, we set the height of each <td> cell to 40 pixels. Then we vertically aligned the contents of those cells to the bottom of the cells.
      <\/p>\n\n\n\n
      Horizontal Borders<\/h3>\n\n\n\n
      When you\u2019re creating a table, you may decide that you only want borders to appear at the bottom of each cell. You can apply the border-bottom property to <th> and <td> cells to do so.
      <\/p>\n\n\n\n
      Here\u2019s the code we can use to create a horizontal lower border for each cell in our table:
      <\/p>\n\n\n\n
      th, td {\n\tborder-bottom: 1px solid black;\n}\n<\/pre><\/div>\n\n\n\n
      Our code returns:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      In this example, we created a solid, black, 1-pixel-wide bottom border for each cell in our table.
      <\/p>\n\n\n\n
      Mouse Over (:hover)<\/h3>\n\n\n\n
      If you use the :hover selector in your code, the browser will highlight table rows when a user hovers over them with the mouse. 
      <\/p>\n\n\n\n
      The :hover selector is useful because it allows you to make your tables more interactive. It also helps users better visualize individual rows when they are looking at the table.
      <\/p>\n\n\n\n
      Suppose we want the background color of the rows (<tr>) in our table to change to light gray when the user hovers over them. We can do so using this code:
      <\/p>\n\n\n\n
      tr:hover {\nbackground-color: lightgray;\n}\n<\/pre><\/div>\n\n\n\n
      Our code returns:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      When we hover over a table row, the color of the row changes to light gray. In this case, we hovered over the fourth row of our table, so the color of that row turned to light gray.
      <\/p>\n\n\n\n
      Table Colors<\/h3>\n\n\n\n
      You can use the color property to specify the background and text colors of elements in a table. Suppose we want our table header cells to have a gray background and white text. We can use the following code to style the table that way:
      <\/p>\n\n\n\n
      th {\n\tbackground-color: gray;\n\tcolor: white;\n}\n<\/pre><\/div>\n\n\n\n
      Our code returns:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      In this example, our table\u2019s header cells (<th>) have gray backgrounds. We also set the text in each header cell to white. We defined both of these characteristics using the CSS color property.
      <\/p>\n\n\n\n
      Striped Design<\/h3>\n\n\n\n
      When you\u2019re designing a table, you may want to use the zebra-styled approach. In this style, row colors alternate between two colors. This creates a striped, zebra-like effect. To accomplish this task, we can use the nth-child() selector.
      <\/p>\n\n\n\n
      Here\u2019s the code we will use to create a striped design wherein we set the background color of every other row to light gray:
      <\/p>\n\n\n\n
      tr:nth-child(even) {\n\tbackground-color: lightgray;\n}\n<\/pre><\/div>\n\n\n\n
      Our code returns:<\/p>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      We set the background color of every even-numbered row in our table to light gray. 
      <\/p>\n\n\n\n
      If we want to set the background color of odd-numbered rows in our table to light gray, we can specify \u201codd\u201d instead of \u201ceven\u201d in the code above.
      <\/p>\n\n\n\n
      Empty Cells<\/h3>\n\n\n\n
      We use the empty-cells property to specify whether cells should have any borders or background if they do not contain any text. 
      <\/p>\n\n\n\n
      The empty-cells property takes one of two values: hide or show. CSS does the following to empty cells when a user specifies one of these values: 
      <\/p>\n\n\n\n
        \n
      • hide<\/strong>: hides the background color and borders.<\/li>\n\n\n\n
      • show<\/strong>: shows the background color and borders.<\/li>\n<\/ul>\n\n\n\n
        The empty-cells CSS property only works if border-collapse is set to separate. This means that the borders are not collapsed.
        <\/p>\n\n\n\n
        Suppose that we have an empty cell in our table above and want to hide the background and borders of that empty cell. We can use the following code to accomplish this task:
        <\/p>\n\n\n\n
        table {\n\tempty-cells: hide;\n\tborder-collapse: separate;\n}\n<\/pre><\/div>\n\n\n\n
        Our code returns:<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        In this example, we removed the Weeks on List<\/code> value for the book Where the Crawdads Sing<\/em>. Because that cell contains no value, when we specify the value hide for the empty-cells attribute, the table hides the border element that otherwise would have been applied to the cell.
        <\/p>\n\n\n\n
        Conclusion<\/h2>\n\n\n\n
        CSS offers a number of properties used to style tables. These include the padding property (adds space between the contents of a cell and its borders) and the text-align property (aligns the text inside a cell).
        <\/p>\n\n\n\n
        This tutorial discussed, with examples, how to style a table using CSS. Now you\u2019re ready to start styling tables in CSS like a pro!<\/p>\n","protected":false},"excerpt":{"rendered":"Early on in web development, HTML tables were very basic and lacked extensive styling options. Today, however, most tables are styled to create a more aesthetically pleasing and functional experience for users. CSS provides a number of attributes for styling tables. These attributes allow you to\u2014among other things\u2014separate cells in a table, specify table borders,…","protected":false},"author":240,"featured_media":14766,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14765","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"\nHow to Style HTML Tables with CSS: A Step By Step Guide<\/title>\n<meta name=\"description\" content=\"CSS provides a number of attributes for styling tables. These attributes allow you to\u2014among other things.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-tables\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Style HTML Tables with CSS\" \/>\n<meta property=\"og:description\" content=\"CSS provides a number of attributes for styling tables. These attributes allow you to\u2014among other things.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-tables\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-17T19:36:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T10:41:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/macbook-pro-macbook-computer-programming-60626.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"665\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-tables\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-tables\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"How to Style HTML Tables with CSS\",\"datePublished\":\"2020-04-17T19:36:58+00:00\",\"dateModified\":\"2023-12-01T10:41:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-tables\/\"},\"wordCount\":1610,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-tables\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/macbook-pro-macbook-computer-programming-60626.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-tables\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-tables\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-tables\/\",\"name\":\"How to Style HTML Tables with CSS: A Step By Step Guide\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-tables\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-tables\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/macbook-pro-macbook-computer-programming-60626.jpg\",\"datePublished\":\"2020-04-17T19:36:58+00:00\",\"dateModified\":\"2023-12-01T10:41:06+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"CSS provides a number of attributes for styling tables. These attributes allow you to\u2014among other things.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-tables\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-tables\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-tables\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/macbook-pro-macbook-computer-programming-60626.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/macbook-pro-macbook-computer-programming-60626.jpg\",\"width\":1000,\"height\":665},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-tables\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Style HTML Tables with CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Style HTML Tables with CSS: A Step By Step Guide","description":"CSS provides a number of attributes for styling tables. These attributes allow you to\u2014among other things.","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:\/\/careerkarma.com\/blog\/css-tables\/","og_locale":"en_US","og_type":"article","og_title":"How to Style HTML Tables with CSS","og_description":"CSS provides a number of attributes for styling tables. These attributes allow you to\u2014among other things.","og_url":"https:\/\/careerkarma.com\/blog\/css-tables\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-04-17T19:36:58+00:00","article_modified_time":"2023-12-01T10:41:06+00:00","og_image":[{"width":1000,"height":665,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/macbook-pro-macbook-computer-programming-60626.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-tables\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-tables\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"How to Style HTML Tables with CSS","datePublished":"2020-04-17T19:36:58+00:00","dateModified":"2023-12-01T10:41:06+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-tables\/"},"wordCount":1610,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-tables\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/macbook-pro-macbook-computer-programming-60626.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-tables\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-tables\/","url":"https:\/\/careerkarma.com\/blog\/css-tables\/","name":"How to Style HTML Tables with CSS: A Step By Step Guide","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-tables\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-tables\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/macbook-pro-macbook-computer-programming-60626.jpg","datePublished":"2020-04-17T19:36:58+00:00","dateModified":"2023-12-01T10:41:06+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"CSS provides a number of attributes for styling tables. These attributes allow you to\u2014among other things.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-tables\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-tables\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-tables\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/macbook-pro-macbook-computer-programming-60626.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/macbook-pro-macbook-computer-programming-60626.jpg","width":1000,"height":665},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-tables\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"How to Style HTML Tables with CSS"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14765"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14765\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14766"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}