{"id":1246,"date":"2019-07-18T13:29:19","date_gmt":"2019-07-18T13:29:19","guid":{"rendered":"https:\/\/www.copahost.com\/blog\/?p=1246"},"modified":"2020-05-31T14:01:06","modified_gmt":"2020-05-31T14:01:06","slug":"html-table","status":"publish","type":"post","link":"https:\/\/www.copahost.com\/blog\/html-table\/","title":{"rendered":"HTML Table: Quick HTML guide"},"content":{"rendered":"<h3>Topics in this article<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-table\/#topic1\">A basic HTML table example<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-table\/#topic2\">TH tag &#8211; HTML Table header<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-table\/#topic3\">TR tag &#8211; Table row<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-table\/#topic4\">TD tag &#8211; Table cell<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-table\/#topic5\">Cellspacing<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-table\/#topic6\">Table padding<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-table\/#topic7\">HTML Table Styles<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-table\/#topic8\">Border colors<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-table\/#topic9\">Cell width<\/a><\/li>\n<li><a href=\"https:\/\/www.copahost.com\/blog\/html-table\/#topic10\">Conclusion<\/a><\/li>\n<\/ul>\n<p><iframe title=\"HTML Table tag tutorial | How to make table in HTML | HTML TABLE, TR, TH, TD tags\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/lT6Ba7DKfis?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><\/p>\n<h3>A basic HTML Table template example<\/h3>\n<p>Tables are a very important part of web designing. They are mostly used to display data. An HTML table is nothing but rows and columns. There can be any number of rows and columns in the table. Following is an example of a basic table with four rows, three columns and a border of one pixel. You can use this HTML Table template as a sample:<\/p>\n<pre class=\"lang:default decode:true\">&lt;table border=1&gt;\r\n  &lt;tr&gt;\r\n     &lt;th&gt;Name&lt;\/th&gt;\r\n     &lt;th&gt;Country&lt;\/th&gt;\r\n     &lt;th&gt;Age&lt;\/th&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n     &lt;td&gt;Peter&lt;\/td&gt;\r\n     &lt;td&gt;USA&lt;\/td&gt;\r\n     &lt;td&gt; 21&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n     &lt;td&gt;Sam&lt;\/td&gt;\r\n     &lt;td&gt;Mexico&lt;\/td&gt;\r\n     &lt;td&gt; 23&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n     &lt;td&gt;John&lt;\/td&gt;\r\n     &lt;td&gt;Spain&lt;\/td&gt;\r\n     &lt;td&gt; 25&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n&lt;\/table&gt;<\/pre>\n<p>The <a href=\"https:\/\/www.copahost.com\/blog\/did-you-know-that-when-you-confirm-your-identity-through-a-captcha-code-you-are-helping-to-create-the-largest-digital-library-of-the-world\/\">code above shows how the TABLE tag creates<\/a> an HTML table. In a table, there are multiple TR, TH, and TD tags. A TR tag creates a row. Every row has columns. TD tag creates a cell. The TH tag designates a cell that is a header for a group of cells within a table.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1254\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/table1.png\" alt=\"\" width=\"197\" height=\"140\" \/><br \/>\n<a id=\"topic2\"><\/a><\/p>\n<h3>The TH tag &#8211; HTML Table header<\/h3>\n<p>Everything looks more clear with a header. A table is much more easy to understand when headers are provided on the top row. <a href=\"https:\/\/www.copahost.com\/blog\/meta-tags-html\/\">HTML has TH tag<\/a> for such headers. Generally, the number of TH tags depends upon the number of columns inside each row. Well, there is no such rule. You can use as many TH tags you need.<\/p>\n<p>For example, an <a href=\"https:\/\/www.copahost.com\/blog\/html-link\/\">HTML table code with only TH tags<\/a>.<\/p>\n<pre class=\"lang:default decode:true\">&lt;table border=1&gt;\r\n  &lt;tr&gt;\r\n     &lt;th&gt; Name &lt;\/th&gt;\r\n     &lt;th&gt; Country &lt;\/th&gt;\r\n     &lt;th&gt; Age &lt;\/th&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n     &lt;th&gt; Name &lt;\/th&gt;\r\n     &lt;th&gt; Country &lt;\/th&gt;\r\n     &lt;th&gt; Age &lt;\/th&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n     &lt;th&gt; Name &lt;\/th&gt;\r\n     &lt;th&gt; Country &lt;\/th&gt;\r\n     &lt;th&gt; Age &lt;\/th&gt;\r\n  &lt;\/tr&gt;\r\n&lt;\/table&gt;<\/pre>\n<p>All the three rows contain the th tag. Note that, text written between the th tag always bold. As the th tag is used for table headers, it is always used in the top row of the table only.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1255\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/table2.png\" alt=\"\" width=\"196\" height=\"109\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/table2.png 196w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/table2-145x80.png 145w\" sizes=\"(max-width: 196px) 100vw, 196px\" \/><br \/>\n<a id=\"topic3\"><\/a><\/p>\n<h3>The TR tag &#8211; Table row<\/h3>\n<p>There are two most important parts of a table and TR tag is one of them. A table is a table when there are rows. A TR tag creates rows in a table. The TR must stay inside the TABLE tag. There can be any number of rows inside a table tag. TR tag is the one that contains TH and TD tags.<\/p>\n<pre class=\"lang:default decode:true\">&lt;table border=1&gt;\r\n  &lt;tr&gt;\r\n     &lt;th&gt; Name &lt;\/th&gt;\r\n     &lt;th&gt; Country &lt;\/th&gt;\r\n     &lt;th&gt; Age &lt;\/th&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n     &lt;td&gt; Peter &lt;\/td&gt;\r\n     &lt;td&gt; USA &lt;\/td&gt;\r\n     &lt;td&gt; 21 &lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n     &lt;td&gt; Sam &lt;\/td&gt;\r\n     &lt;td&gt; Mexico &lt;\/td&gt;\r\n     &lt;td&gt; 23 &lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n&lt;\/table&gt;<\/pre>\n<p>In the above code, there are three tr tags, that means, there are three rows in the table. Each row can contain any number of td and th tags.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-1256\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/table3.png\" alt=\"\" width=\"193\" height=\"111\" \/><br \/>\n<a id=\"topic4\"><\/a><\/p>\n<h3>TD tag &#8211; table cell<\/h3>\n<p>Another most important part of a table is TD tag. The TD <a href=\"https:\/\/www.copahost.com\/blog\/html-comments\/\">tag defines a standard cell in an HTML<\/a> table. Both TD and TH tag define a standard cell. The TH tag is used for headers while TD tag is used for normal cells.<\/p>\n<p>The TH tag is very similar to TD, but the difference is that the TH will be bolder and stronger.\u00a0 A single TR tag can contain any number of TD tags. Following is an example of a table with 5 rows:<\/p>\n<pre class=\"lang:default decode:true\">&lt;table border=1&gt;\r\n  &lt;tr&gt;\r\n     &lt;th&gt; Name &lt;\/th&gt;\r\n     &lt;th&gt; Country &lt;\/th&gt;\r\n     &lt;th&gt; Age &lt;\/th&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n     &lt;td&gt; Peter &lt;\/td&gt;\r\n     &lt;td&gt; USA &lt;\/td&gt;\r\n     &lt;td&gt; 21 &lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n     &lt;td&gt; Sam &lt;\/td&gt;\r\n     &lt;td&gt; Mexico &lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n     &lt;td&gt; John &lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n     &lt;td&gt; Lily &lt;\/td&gt;\r\n     &lt;td&gt; Canada &lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n&lt;\/table&gt;<\/pre>\n<p>In the above code, there are five rows. The first row is for headings. The second row contains three cells while the third one has only two cells. The fourth row has one cell but the fifth row again has three cells. This explains that you can use any number of TD tags (or cells) inside each TR tag.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1257 size-full\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/table4.png\" alt=\"html table\" width=\"198\" height=\"175\" \/><br \/>\n<a id=\"topic5\"><\/a><\/p>\n<h3>Cellspacing<\/h3>\n<p>Cells in a table are squeezed to each other. There is very little space between the cells. The cellspacing attribute of the table tag controls the space between the cells. By default, most of the browsers have a cell spacing of two pixels. But this cell spacing can be changed by using cellspacing attribute. The value of the cellspacing attribute should be in pixels. Observe the difference between the following two tables.<\/p>\n<pre class=\"lang:default decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;style&gt;\r\ntable, th, td {\r\n  border: 1px solid black;\r\n}\r\n&lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;p&gt;Table without cellspacing:&lt;\/p&gt;\r\n&lt;table border=1&gt;\r\n&lt;tr&gt;\r\n&lt;th&gt;Name&lt;\/th&gt;\r\n&lt;th&gt;Country&lt;\/th&gt;\r\n&lt;th&gt; Age &lt;\/th&gt;\r\n&lt;\/tr&gt;\r\n&lt;tr&gt;\r\n&lt;td&gt;Peter&lt;\/td&gt;\r\n&lt;td&gt;USA&lt;\/td&gt;\r\n&lt;td&gt;21&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n&lt;p&gt;Table with cellspacing:&lt;\/p&gt;\r\n&lt;table border=1 cellspacing=\"10\"&gt;\r\n&lt;tr&gt;\r\n&lt;th&gt;Name&lt;\/th&gt;\r\n&lt;th&gt;Country&lt;\/th&gt;\r\n&lt;th&gt; Age &lt;\/th&gt;\r\n&lt;\/tr&gt;\r\n&lt;tr&gt;\r\n&lt;td&gt;Peter&lt;\/td&gt;\r\n&lt;td&gt;USA&lt;\/td&gt;\r\n&lt;td&gt;21&lt;\/td&gt;\r\n&lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>The first table does not have any cell spacing. So all the cells are squezed towards each other. In the second table, the cell spacing of ten pixels is given. That is why cells are not that close to each other.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1258\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/table5.png\" alt=\"\" width=\"249\" height=\"302\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/table5.png 249w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/table5-247x300.png 247w\" sizes=\"(max-width: 249px) 100vw, 249px\" \/><br \/>\n<a id=\"topic6\"><\/a><\/p>\n<h3>HTML Table Padding<\/h3>\n<p>Unlike cell spacing, an HTML table cell padding defines the space between the cell wall and cell content. By default, there is very little space between walls and cell content. Cellpading attribute is used to increase this space. Similar to the cellspacing attribute, cellpading attribute is also used in the table tag. Its value is also given in pixels. Observe the following tables.<\/p>\n<pre class=\"lang:default decode:true\">&lt;p&gt;Table without cellpading:&lt;\/p&gt;\r\n&lt;table border=1&gt;\r\n  &lt;tr&gt;\r\n     &lt;th&gt;Name&lt;\/th&gt;\r\n     &lt;th&gt;Country&lt;\/th&gt;\r\n     &lt;th&gt; Age &lt;\/th&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n     &lt;td&gt;Peter&lt;\/td&gt;\r\n     &lt;td&gt;USA&lt;\/td&gt;\r\n     &lt;td&gt;21&lt;\/td&gt;\r\n    &lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n\r\n&lt;p&gt;Table with cellpading:&lt;\/p&gt;\r\n&lt;table border=1 cellpadding=\"10\"&gt;\r\n  &lt;tr&gt;\r\n     &lt;th&gt;Name&lt;\/th&gt;\r\n     &lt;th&gt;Country&lt;\/th&gt;\r\n     &lt;th&gt; Age &lt;\/th&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n     &lt;td&gt;Peter&lt;\/td&gt;\r\n     &lt;td&gt;USA&lt;\/td&gt;\r\n     &lt;td&gt;21&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n<\/pre>\n<p>The first table does not have any cell padding. So all the cells are very close to the walls. In the second table, the HTML Table cell padding of ten pixels is given. That is why there is some space between cell walls and cell content.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1259\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/table6.png\" alt=\"\" width=\"264\" height=\"304\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/table6.png 264w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/table6-261x300.png 261w\" sizes=\"(max-width: 264px) 100vw, 264px\" \/><\/p>\n<p>Note that, cellspacing and cellpading attributes are not supported in HTML5.<br \/>\n<a id=\"topic7\"><\/a><\/p>\n<h3>HTML Table Style<\/h3>\n<p>Using HTML tables, it&#8217;s possible to have different <a href=\"https:\/\/www.copahost.com\/blog\/html-background-color\/\">HTML background colours<\/a> in each cell (TD) or row (TR). You can check an HTML colour table <a href=\"https:\/\/www.copahost.com\/blog\/font-color-html\/\">here in this article<\/a>. You can use any HTML style you wish, as well. Here&#8217;s an example:<\/p>\n<pre class=\"lang:default decode:true\">&lt;table border=1&gt; \r\n  &lt;tr&gt; \r\n     &lt;th&gt;Name&lt;\/th&gt; \r\n     &lt;th&gt;Country&lt;\/th&gt; \r\n     &lt;th&gt; Age &lt;\/th&gt; \r\n  &lt;\/tr&gt; \r\n  &lt;tr&gt; \r\n     &lt;td style=\"background-color: yellow;\"&gt;Peter&lt;\/td&gt; \r\n     &lt;td&gt;USA&lt;\/td&gt; \r\n     &lt;td&gt;21&lt;\/td&gt; \r\n  &lt;\/tr&gt; \r\n  &lt;tr style=\"background-color: lightgreen;\"&gt; \r\n     &lt;td&gt;John&lt;\/td&gt; \r\n     &lt;td&gt;Spain&lt;\/td&gt; \r\n     &lt;td&gt;43&lt;\/td&gt; \r\n  &lt;\/tr&gt; \r\n&lt;\/table&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1267 size-full\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-table.jpg\" alt=\"\" width=\"168\" height=\"99\" \/><br \/>\n<a id=\"topic8\"><\/a><\/p>\n<h3>Border colours<\/h3>\n<p>Have you noticed any border in the above tables? The outline around the cells is called the border of the table. We can use HTML tables styles widely with borders. By default, there is no border. Color can also be applied to the border. For this, the border-color attribute is used. The following example shows how to use the border-color attribute in a table tag.<\/p>\n<pre class=\"lang:default decode:true\">&lt;table style=\"border-color: #FF0000\"&gt;\r\n  &lt;tr&gt;\r\n     &lt;th&gt;Name&lt;\/th&gt;\r\n     &lt;th&gt;Country&lt;\/th&gt;\r\n     &lt;th&gt; Age &lt;\/th&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n     &lt;td &gt;Peter&lt;\/td&gt;\r\n     &lt;td&gt;USA&lt;\/td&gt;\r\n     &lt;td&gt;21&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n&lt;\/table&gt;\r\n<\/pre>\n<p>First, you must use the border property inside the table. The default value for tables is <strong>1-pixel solid black<\/strong>.\u00a0 The tags TD and TH will have the same appearance in this case.<\/p>\n<p>Now to change the border color of the table from black to red, you must use the border-color attribute inside the TABLE tag. For example, we used the <a href=\"https:\/\/www.copahost.com\/blog\/font-color-html\/\">HTML color code<\/a> #FF000(red)\u00a0 to the border-color attribute.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1260\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/table7.png\" alt=\"\" width=\"191\" height=\"80\" \/><br \/>\n<a id=\"topic9\"><\/a><\/p>\n<h3>Table Column width<\/h3>\n<p>The cell width attribute is used to define the HTML table column width of a particular cell. The width attribute is used in TD tag and value is given in either pixels or percentages. The following is an example of a width attribute.<\/p>\n<pre class=\"lang:default decode:true\">&lt;table&gt;\r\n  &lt;tr&gt;\r\n     &lt;th width=\"70%\"&gt;Name&lt;\/th&gt;\r\n     &lt;th width=\"20%\"&gt;Country&lt;\/th&gt;\r\n     &lt;th&gt; Age &lt;\/th&gt;\r\n  &lt;\/tr&gt;\r\n  &lt;tr&gt;\r\n     &lt;td&gt;Peter&lt;\/td&gt;\r\n     &lt;td&gt;USA&lt;\/td&gt;\r\n     &lt;td&gt;21&lt;\/td&gt;\r\n  &lt;\/tr&gt;\r\n&lt;\/table&gt;<\/pre>\n<p>The first table column has a seventy percent width while the second one has twenty percent. The third column doesn&#8217;t contain any width attribute.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1261\" src=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/table8.png\" alt=\"\" width=\"414\" height=\"84\" srcset=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/table8.png 414w, https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/table8-300x61.png 300w\" sizes=\"(max-width: 414px) 100vw, 414px\" \/><\/p>\n<p>Note that, width attribute does not work in HTML5. Following is the CSS syntax for changing the width in HTML5.<\/p>\n<pre class=\"lang:default decode:true\">&lt;td style=\"width:100px\"&gt;<\/pre>\n<h3>Colspan in a HTML table<\/h3>\n<p>In an HTML table, you can use the colspan attribute. This attribute will tell the browser how many columns the cell will occupy.<\/p>\n<p>For example, using an HTML table colspan of 2 will make the value &#8220;name&#8221; fill 2 cells of a table:<\/p>\n<pre class=\"lang:default decode:true\">&lt;td colspan=2&gt;Name&lt;\/td&gt;<\/pre>\n<p>For example, using a Colspan of 4 will make the value &#8220;name&#8221; fill 4 cells of the table.<\/p>\n<pre class=\"lang:default decode:true\">&lt;td colspan=4&gt;Name&lt;\/td&gt;<\/pre>\n<h3>\u00a0Conclusion about HTML table<\/h3>\n<p>HTML Tables are one of the most important parts of the <a href=\"https:\/\/pt.wikipedia.org\/wiki\/Tim_Berners-Lee\">HTML family<\/a>. HTML provides a variety of options to develop better-looking tables. You can modify Rows and Columns always. You can also customize Borders. A variety of colours are there which could be applied on the table borders.\u00a0 The TABLE tag is hence a very useful tag. It is easy to learn how to create a table in HTML and modify it accordingly.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Topics in this article A basic HTML table example TH tag &#8211; HTML Table header TR tag &#8211; Table row TD tag &#8211; Table cell Cellspacing Table padding HTML Table Styles Border colors Cell width Conclusion A basic HTML Table template example Tables are a very important part of web designing. They are mostly used [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2007,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[114],"tags":[],"class_list":["post-1246","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML Table: Quick HTML guide - Copahost<\/title>\n<meta name=\"description\" content=\"All about the HTML table. Customize colors, appearance, borders. All about rows, cells, headers. Cellspacing, cellpadding and customized cell colors.\" \/>\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.copahost.com\/blog\/html-table\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Table: Quick HTML guide - Copahost\" \/>\n<meta property=\"og:description\" content=\"All about the HTML table. Customize colors, appearance, borders. All about rows, cells, headers. Cellspacing, cellpadding and customized cell colors.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.copahost.com\/blog\/html-table\/\" \/>\n<meta property=\"og:site_name\" content=\"Copahost\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-18T13:29:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-31T14:01:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-tables.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Gustavo Gallas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gustavo Gallas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.copahost.com\/blog\/html-table\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/html-table\/\"},\"author\":{\"name\":\"Gustavo Gallas\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/386b3f1f79299d43f4ceb33d26428246\"},\"headline\":\"HTML Table: Quick HTML guide\",\"datePublished\":\"2019-07-18T13:29:19+00:00\",\"dateModified\":\"2020-05-31T14:01:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/html-table\/\"},\"wordCount\":1192,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/html-table\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-tables.jpg\",\"articleSection\":[\"Other tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.copahost.com\/blog\/html-table\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.copahost.com\/blog\/html-table\/\",\"url\":\"https:\/\/www.copahost.com\/blog\/html-table\/\",\"name\":\"HTML Table: Quick HTML guide - Copahost\",\"isPartOf\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/html-table\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/html-table\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-tables.jpg\",\"datePublished\":\"2019-07-18T13:29:19+00:00\",\"dateModified\":\"2020-05-31T14:01:06+00:00\",\"description\":\"All about the HTML table. Customize colors, appearance, borders. All about rows, cells, headers. Cellspacing, cellpadding and customized cell colors.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/html-table\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.copahost.com\/blog\/html-table\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.copahost.com\/blog\/html-table\/#primaryimage\",\"url\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-tables.jpg\",\"contentUrl\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-tables.jpg\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.copahost.com\/blog\/html-table\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.copahost.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Table: Quick HTML guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#website\",\"url\":\"https:\/\/www.copahost.com\/blog\/\",\"name\":\"Copahost\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.copahost.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#organization\",\"name\":\"Copahost\",\"url\":\"https:\/\/www.copahost.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png\",\"contentUrl\":\"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png\",\"width\":223,\"height\":40,\"caption\":\"Copahost\"},\"image\":{\"@id\":\"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/386b3f1f79299d43f4ceb33d26428246\",\"name\":\"Gustavo Gallas\",\"description\":\"Graduated in Computing at PUC-Rio, Brazil. Specialized in IT, networking, systems administration and human and organizational development\u200b. Also have brewing skills.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/gustavo-gallas-107926196\/\"],\"url\":\"https:\/\/www.copahost.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Table: Quick HTML guide - Copahost","description":"All about the HTML table. Customize colors, appearance, borders. All about rows, cells, headers. Cellspacing, cellpadding and customized cell colors.","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.copahost.com\/blog\/html-table\/","og_locale":"en_US","og_type":"article","og_title":"HTML Table: Quick HTML guide - Copahost","og_description":"All about the HTML table. Customize colors, appearance, borders. All about rows, cells, headers. Cellspacing, cellpadding and customized cell colors.","og_url":"https:\/\/www.copahost.com\/blog\/html-table\/","og_site_name":"Copahost","article_published_time":"2019-07-18T13:29:19+00:00","article_modified_time":"2020-05-31T14:01:06+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-tables.jpg","type":"image\/jpeg"}],"author":"Gustavo Gallas","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Gustavo Gallas","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.copahost.com\/blog\/html-table\/#article","isPartOf":{"@id":"https:\/\/www.copahost.com\/blog\/html-table\/"},"author":{"name":"Gustavo Gallas","@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/386b3f1f79299d43f4ceb33d26428246"},"headline":"HTML Table: Quick HTML guide","datePublished":"2019-07-18T13:29:19+00:00","dateModified":"2020-05-31T14:01:06+00:00","mainEntityOfPage":{"@id":"https:\/\/www.copahost.com\/blog\/html-table\/"},"wordCount":1192,"commentCount":0,"publisher":{"@id":"https:\/\/www.copahost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.copahost.com\/blog\/html-table\/#primaryimage"},"thumbnailUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-tables.jpg","articleSection":["Other tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.copahost.com\/blog\/html-table\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.copahost.com\/blog\/html-table\/","url":"https:\/\/www.copahost.com\/blog\/html-table\/","name":"HTML Table: Quick HTML guide - Copahost","isPartOf":{"@id":"https:\/\/www.copahost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.copahost.com\/blog\/html-table\/#primaryimage"},"image":{"@id":"https:\/\/www.copahost.com\/blog\/html-table\/#primaryimage"},"thumbnailUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-tables.jpg","datePublished":"2019-07-18T13:29:19+00:00","dateModified":"2020-05-31T14:01:06+00:00","description":"All about the HTML table. Customize colors, appearance, borders. All about rows, cells, headers. Cellspacing, cellpadding and customized cell colors.","breadcrumb":{"@id":"https:\/\/www.copahost.com\/blog\/html-table\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.copahost.com\/blog\/html-table\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.copahost.com\/blog\/html-table\/#primaryimage","url":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-tables.jpg","contentUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2019\/07\/html-tables.jpg","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/www.copahost.com\/blog\/html-table\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.copahost.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML Table: Quick HTML guide"}]},{"@type":"WebSite","@id":"https:\/\/www.copahost.com\/blog\/#website","url":"https:\/\/www.copahost.com\/blog\/","name":"Copahost","description":"","publisher":{"@id":"https:\/\/www.copahost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.copahost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.copahost.com\/blog\/#organization","name":"Copahost","url":"https:\/\/www.copahost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png","contentUrl":"https:\/\/www.copahost.com\/blog\/wp-content\/uploads\/2016\/03\/copahostlogo.png","width":223,"height":40,"caption":"Copahost"},"image":{"@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.copahost.com\/blog\/#\/schema\/person\/386b3f1f79299d43f4ceb33d26428246","name":"Gustavo Gallas","description":"Graduated in Computing at PUC-Rio, Brazil. Specialized in IT, networking, systems administration and human and organizational development\u200b. Also have brewing skills.","sameAs":["https:\/\/www.linkedin.com\/in\/gustavo-gallas-107926196\/"],"url":"https:\/\/www.copahost.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts\/1246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/comments?post=1246"}],"version-history":[{"count":21,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts\/1246\/revisions"}],"predecessor-version":[{"id":2436,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/posts\/1246\/revisions\/2436"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/media\/2007"}],"wp:attachment":[{"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/media?parent=1246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/categories?post=1246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.copahost.com\/blog\/wp-json\/wp\/v2\/tags?post=1246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}