{"id":6023,"date":"2015-08-06T12:15:57","date_gmt":"2015-08-06T09:15:57","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=6023"},"modified":"2018-01-08T14:14:50","modified_gmt":"2018-01-08T12:14:50","slug":"css-table-layout-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/","title":{"rendered":"CSS Table-Layout Example"},"content":{"rendered":"

The aim of this example is to go through the table-layout<\/code> property of CSS. The table-layout CSS property defines the algorithm to be used to layout the table cells, rows, and columns. The CSS table-layout property has basic support with the following browsers:<\/p>\n

-Chrome
\n-Firefox
\n-Internet Explorer 5+ (IE 5+)
\n-Opera 7+
\n-Safari (WebKit)<\/p>\n

Since the application of the property is fairly easy, we’ll go through some more advanced examples after understanding the basics.
\n 
\n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n

1. Basic Setup & Application<\/h2>\n

Go ahead and create a new html document and add the basic sytnax in it like so:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>CSS Table-Layout Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- STYLE SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
1.1 Syntax & Values<\/h3>\n
The basic application of the property follows this structure table-layout: value;<\/code> and possible values are:<\/p>\n
\/* Keyword values *\/<\/p>\n
\r\ntable-layout: auto;\r\ntable-layout: fixed;\r\n<\/pre>\n
\/* Global values *\/<\/p>\n
\r\ntable-layout: inherit;\r\ntable-layout: initial;\r\ntable-layout: unset;\r\n<\/pre>\n
The keyword values are the ones most used in our everyday experience, but what do they mean?<\/p>\n
1. auto<\/code>
\nAn automatic table layout algorithm is commonly used by most browsers for table layout. The width of the table and its cells depends on the content thereof.<\/p>\n
2. fixed<\/code>
\nTable and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.<\/p>\n
Under the “fixed” layout method, the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the “automatic” layout method, but subsequent cell content may not fit in the column widths provided. Any cell that has content that overflows uses the overflow property to determine whether to clip the overflow content.<\/p>\n
1.2 Application<\/h3>\n
So, after we saw the syntax and values of the table-layout, let’s now apply it somewhere in our code. Take a look at the code below:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n\r\n<!-- Table-Layout: Auto -->\r\n<table class=\"ex1\">\r\n  <tr>\r\n    <td width=\"5%\">1000000000000000000000000000<\/td>\r\n    <td width=\"95%\">10000000<\/td>\r\n  <\/tr>\r\n<\/table> <!-- end table -->\r\n\r\n<!-- Table-Layout: Fixed -->\r\n<table class=\"ex2\">\r\n  <tr>\r\n    <td width=\"5%\">1000000000000000000000000000<\/td>\r\n    <td width=\"95%\">10000000<\/td>\r\n  <\/tr>\r\n<\/table><!-- end table -->\r\n<\/pre>\n
So, we’ve set up two tables to show the two property values in separate tables, inside we;ve added one table row for each of them and two table data, which will be the element affected by the property value set, reflecting the changes. Next, we’re giving the tables some basic properties and then the table-layout<\/code> property, once with an auto<\/code> value and then fixed<\/code>.<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n\r\n<style type=\"text\/css\">\r\ntable {\r\n    border-collapse: separate;\r\n    width: 100%;\r\n    border: 1px solid black;\r\n}\r\n\r\ntd {\r\n    border: 1px solid black;\r\n}\r\n\r\ntable.ex1 {\r\n    table-layout: auto; \/* auto value for the first table *\/\r\n}\r\n\r\ntable.ex2 {\r\n    table-layout: fixed; \/* fixed value for the second table *\/\r\n}\r\n<\/style>\r\n<\/pre>\n
This would look like this:
\n
\"Basic<\/a>
Basic Table-Layout Properties Applied<\/figcaption><\/figure><\/p>\n
2. Fixed Value Complicated Example<\/h2>\n
Going deep into this, imagine you had a full consistent table with lots of data, and messy ones. You’d probably want to have disordered rows and columns becaouse of your very specific needs where, for example, you could have nested rows, stacked columns and so on and so fourth. Look at how such a detailed table would look like:<\/p>\n
\r\n<!-- EXAMPLE 1 -->\r\n\r\n<h1>Fixed Tables Solve Some Issues<\/h1>\r\n\r\n<table class=\"sturdy\">\r\n  <tr>\r\n    <td>I'm 25% wide.<\/td>\r\n    <td>I'm 50% wide.<\/td>\r\n    <td>I'm 25% wide.<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Text down here doesn't affect layout anymore.<\/td>\r\n    <td>...<\/td>\r\n    <td>This long sentence would probably have pushed this row wider.<\/td>\r\n  <\/tr>\r\n<\/table>\r\n\r\n<table class=\"nobreak\">\r\n  <tr>\r\n    <td>The table itself will not exceed<\/td>\r\n    <td>the exact width you set the table to be, from content alone.<\/td>\r\n  <\/tr>\r\n<\/table>\r\n\r\n<table class=\"wider\">\r\n  <tr>\r\n    <td>Well, unless YOU force it wider by<\/td>\r\n    <td>setting the cells wider (combined) than the table is wide.<\/td>\r\n  <\/tr>\r\n<\/table>\r\n\r\n<table class=\"ignoreyou\">\r\n  <tr>\r\n    <td>It won't go smaller though, it will do a calculation.<\/td>\r\n    <td>...<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Set to 10px<br>Thus 25% of total 40px<\/td>\r\n    <td>Set to 30px<br>Thus 75% of total 40px<\/td>\r\n  <\/tr>\r\n<\/table>\r\n\r\n<table class=\"cut-off\">\r\n  <thead>\r\n  <tr>\r\n    <th>My favorite feature is being able to ellipsis text.<\/th>\r\n    <th>It's great for user-generated text.<\/th>\r\n  <\/tr>\r\n  <\/thead>\r\n  <tr>\r\n    <td>Supercalifragilisticexpialidocious Something something something something attrotious<\/td>\r\n    <td>1<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>This little piggy went to market. This little piggy went to bed.<\/td>\r\n    <td>1<\/td>\r\n  <\/tr>\r\n  <tr>\r\n    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis amet molestiae earum accusantium nostrum eveniet ipsum soluta ut reprehenderit vel incidunt laboriosam dolorum maiores! Earum deserunt sit unde? Sunt voluptatem!<\/td>\r\n    <td>1<\/td>\r\n  <\/tr>\r\n<\/table>\r\n\r\n<table class=\"hide\">\r\n  <tr>\r\n    <td class=\"img-1\">Overflow can be hidden.<\/td>\r\n    <td class=\"img-2\">\r\n    <img src=\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/3\/dock-slice-2.png\" \/>\r\n    <\/td>\r\n  <\/tr>\r\n<\/table>\r\n\r\n<table class=\"scroll-code\">\r\n  <tr>\r\n    <td>Overflow can scroll. Except in Firefox.<\/td>\r\n    <td><pre>\r\nbody.logged-in article > h2 {\r\n  background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.2));\r\n}\r\n    <\/pre><\/td>\r\n  <\/tr>\r\n<\/table>\r\n<\/pre>\n
Things get a lot sturdier and more predictable with property\/value in place. The layout is fixed based on the first row. Set the width of those, and the rest of the table follows.<\/p>\n
\r\n\/*EXMAPLE 1*\/\r\ntd, th {\r\n  border: 1px solid black;\r\n}\r\ntable {\r\n  margin: 15px 0;\r\n  border: 1px solid black;\r\n  table-layout: fixed;\r\n  width: 100%; \/* must have this set *\/\r\n}\r\nhtml {\r\n  background: #ccc;\r\n}\r\nbody {\r\n  max-width: 400px;\r\n  margin: 0 auto;\r\n  background: white;\r\n  padding: 10px;\r\n}\r\n\r\n.sturdy td:nth-child(1),\r\n.sturdy td:nth-child(3) {\r\n  width: 25%;\r\n}\r\n.sturdy td:nth-child(2) {\r\n  width: 50%;\r\n}\r\n\r\n.nobreak {\r\n  white-space: nowrap;\r\n}\r\n\r\n.wider td {\r\n  width: 300px;\r\n}\r\n\r\n.ignoreyou td:nth-child(1) {\r\n  width: 10px;\r\n}\r\n.ignoreyou td:nth-child(2) {\r\n  width: 30px;\r\n}\r\n\r\n.cut-off th:nth-child(1) {\r\n  width: 75%;\r\n}\r\n.cut-off td:nth-child(1) {\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n}\r\n.cut-off th:nth-child(2) {\r\n  width: 25%;\r\n}\r\n.cut-off td:nth-child(2) span {\r\n  display: block;\r\n\r\n}\r\n\r\n.hide td {\r\n  overflow: hidden;\r\n}\r\n\r\n.scroll-code td {\r\n  overflow: auto;\r\n}\r\n<\/pre>\n
Well, some things are fixed, others just got messed up:
\n
\"A<\/a>
A complicated table case where fixed value is applied to the property<\/figcaption><\/figure><\/p>\n
Since fixed is the only distinct value the property can get  (because auto is just going to give cells the right space according to the text inside), you’ll just have to keep an eye on using the fixed<\/code> value and notice where and when you can take advantage of it. It’s not that useful, however.<\/p>\n
3. Conclusion<\/h2>\n
To conclude we can state that the table-layout<\/code> property is a good way to set table cells to fixed widths, making it easier for cases when your content is limited\/fixed to a specific width, while it is not recommended to be used when considering large piece of data and information being passed into the cell.<\/p>\n
Such case, for example, might be the information coming from a user input, that needs to be added to a table. Obviously, in this case you are not sure about how much space the text is going to occupy, so an auto<\/code> value would be your most preferable choice. Above, the example showed different cases of how the fixed value could be the wrong one to be used. However, it is always on you to decide.<\/p>\n
4. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: CSS Table-Layout<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
The aim of this example is to go through the table-layout property of CSS. The table-layout CSS property defines the algorithm to be used to layout the table cells, rows, and columns. The CSS table-layout property has basic support with the following browsers: -Chrome -Firefox -Internet Explorer 5+ (IE 5+) -Opera 7+ -Safari (WebKit) Since …<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-6023","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"\nCSS Table-Layout Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to go through the table-layout property of CSS. The table-layout CSS property defines the algorithm to be used to layout the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Table-Layout Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to go through the table-layout property of CSS. The table-layout CSS property defines the algorithm to be used to layout the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-08-06T09:15:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:14:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Table-Layout Example\",\"datePublished\":\"2015-08-06T09:15:57+00:00\",\"dateModified\":\"2018-01-08T12:14:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/\"},\"wordCount\":697,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/\",\"name\":\"CSS Table-Layout Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-08-06T09:15:57+00:00\",\"dateModified\":\"2018-01-08T12:14:50+00:00\",\"description\":\"The aim of this example is to go through the table-layout property of CSS. The table-layout CSS property defines the algorithm to be used to layout the\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Table-Layout Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Table-Layout Example - Web Code Geeks - 2026","description":"The aim of this example is to go through the table-layout property of CSS. The table-layout CSS property defines the algorithm to be used to layout the","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:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Table-Layout Example - Web Code Geeks - 2026","og_description":"The aim of this example is to go through the table-layout property of CSS. The table-layout CSS property defines the algorithm to be used to layout the","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-08-06T09:15:57+00:00","article_modified_time":"2018-01-08T12:14:50+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Table-Layout Example","datePublished":"2015-08-06T09:15:57+00:00","dateModified":"2018-01-08T12:14:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/"},"wordCount":697,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/","name":"CSS Table-Layout Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-08-06T09:15:57+00:00","dateModified":"2018-01-08T12:14:50+00:00","description":"The aim of this example is to go through the table-layout property of CSS. The table-layout CSS property defines the algorithm to be used to layout the","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-table-layout-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Table-Layout Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=6023"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6023\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=6023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=6023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=6023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}