{"id":4813,"date":"2017-11-29T04:24:45","date_gmt":"2017-11-29T04:24:45","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=4813"},"modified":"2017-11-29T04:24:45","modified_gmt":"2017-11-29T04:24:45","slug":"tables-rowspan-and-colspan","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/tables-rowspan-and-colspan\/","title":{"rendered":"Tables rowspan and colspan"},"content":{"rendered":"
Tables<\/strong>\u00a0may have seemed complicated enough\u00a0in the HTML Beginner Tutorial. It can be quite difficult to visualize a two-dimensional grid from one-dimensional lines of code.<\/p>\n

Well, it gets trickier. All thanks to the\u00a0rowspan<\/code>and\u00a0colspan<\/code>\u00a0attributes. Those bastards.<\/p>\n<\/header>\n

The following code is similar to that in\u00a0the Tables page of the HTML Beginner Tutorial:<\/p>\n
\r\n<<\/span>table><\/span><\/span>\r\n    <<\/span>tr><\/span><\/span>\r\n        <<\/span>th><\/span><\/strong><\/span>Column 1 heading<\/<\/span>th><\/span><\/strong><\/span>\r\n        <<\/span>th><\/span><\/strong><\/span>Column 2 heading<\/<\/span>th><\/span><\/strong><\/span>\r\n        <<\/span>th><\/span><\/strong><\/span>Column 3 heading<\/<\/span>th><\/span><\/strong><\/span>\r\n    <\/<\/span>tr><\/span><\/span>\r\n    <<\/span>tr><\/span><\/span>\r\n        <<\/span>td><\/span><\/span>Row 2, cell 1<\/<\/span>td><\/span><\/span>\r\n        <<\/span>td colspan<\/span>=<\/span>\"<\/span>2\"<\/span><\/span><\/strong>><\/span><\/span>Row 2, cell 2, also spanning Row 2, cell 3<\/<\/span>td><\/span><\/span>\r\n    <\/<\/span>tr><\/span><\/span>\r\n    <<\/span>tr><\/span><\/span>\r\n        <<\/span>td rowspan<\/span>=<\/span>\"<\/span>2\"<\/span><\/span><\/strong>><\/span><\/span>Row 3, cell 1, also spanning Row 4, cell 1<\/<\/span>td><\/span><\/span>\r\n        <<\/span>td><\/span><\/span>Row 3, cell 2<\/<\/span>td><\/span><\/span>\r\n        <<\/span>td><\/span><\/span>Row 3, cell 3<\/<\/span>td><\/span><\/span>\r\n    <\/<\/span>tr><\/span><\/span>\r\n    <<\/span>tr><\/span><\/span>\r\n        <<\/span>td><\/span><\/span>Row 4, cell 2<\/<\/span>td><\/span><\/span>\r\n        <<\/span>td><\/span><\/span>Row 4, cell 3<\/<\/span>td><\/span><\/span>\r\n    <\/<\/span>tr><\/span><\/span>\r\n<\/<\/span>table><\/span><\/span>\r\n<\/code><\/pre>\n
<\/div>\n
Header cells<\/h2>\n
The first difference is that the\u00a0td<\/code><\/a>\u00a0tags of the first row have been replaced with\u00a0th<\/code><\/a>\u00a0tags. Whereas a\u00a0td<\/code><\/a>\u00a0is a standard\u00a0data<\/strong>\u00a0cell,\u00a0th<\/code><\/a>\u00a0is a\u00a0header<\/strong>\u00a0cell. As with\u00a0td<\/code><\/a>\u00a0elements, these must be enclosed inside\u00a0tr<\/code><\/a>\u00a0elements.<\/p>\n
Spanning columns and rows<\/h2>\n
colspan<\/code>\u00a0and\u00a0rowspan<\/code>\u00a0attributes have also been used in some of the\u00a0td<\/code><\/a>tags. If you look at this code in a browser, you will see that on the second row there are now two cells instead of three, the second cell spanning the second and third column. The\u00a0colspan<\/code>\u00a0attribute, which means \u201ccolumn span\u201d will span the cell over the number of cells that is specified. This means, in this example, that there is no need for a third\u00a0td<\/code><\/a>\u00a0element \u2014 two cells are\u00a0merged<\/strong>\u00a0into one.<\/p>\n