{"id":278,"date":"2019-11-06T18:47:32","date_gmt":"2019-11-06T13:17:32","guid":{"rendered":"https:\/\/wpproonline.com\/?p=278"},"modified":"2026-02-26T10:48:39","modified_gmt":"2026-02-26T10:48:39","slug":"html-5-notes-for-professional-chapter-8-9-tablescomments","status":"publish","type":"post","link":"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-8-9-tablescomments\/","title":{"rendered":"HTML 5 Notes For Professional \u2013 Chapter \u2013 8 – 9 (Tables & Comments)"},"content":{"rendered":"\n

TABLES<\/h2>\n\n

The HTML <table><\/strong><\/em><\/code> element allows web authors to display tabular data (such as text, images, links, other tables,etc.) in a two-dimensional table with rows and columns of cells.<\/p>\n\n

<\/p>\n\n

Simple Table<\/h3>\n\n
<table>\n    <tr>\n        <th>Heading 1\/Column 1<\/th>\n        <th>Heading 2\/Column 2<\/th>\n    <\/tr>\n    <tr>\n        <td>Row 1 Data Column 1<\/td>\n        <td>Row 1 Data Column 2<\/td>\n    <\/tr>\n    <tr>\n        <td>Row 2 Data Column 1<\/td>\n        <td>Row 2 Data Column 2<\/td>\n    <\/tr>\n<\/table><\/pre>\n\n
This will render a <table><\/em><\/strong><\/code> consisting of three total rows (<tr><\/strong><\/em><\/code>): one row of header cells (<th><\/code><\/em><\/strong>) and two rows of content cells (<td><\/strong><\/em><\/code>). <th><\/code><\/em><\/strong> elements are tabular headers and <td><\/em><\/strong><\/code> elements are tabular data. You can put whatever you want inside a <td><\/code><\/strong><\/em> or <th><\/code><\/strong><\/em>.<\/p>\n\n\n\n\n\n\n
Heading 1\/Column 1<\/strong><\/td>\nHeading 2\/Column 2<\/strong><\/td>\n<\/tr>\n
Row 1 Data Column 1<\/td>\nRow 1 Data Column 2<\/td>\n<\/tr>\n
Row 2 Data Column 1<\/td>\nRow 2 Data Column 2<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Spanning columns or rows<\/h3>\n\n
Table cells can span multiple columns or rows using the colspan<\/code><\/em><\/strong> and rowspan<\/code><\/em><\/strong> attributes. These attributes can be applied to <th><\/code><\/em><\/strong> and <td><\/code><\/em><\/strong> elements.<\/p>\n\n
<table>\n    <tr>\n        <td>row 1 col 1<\/td>\n        <td>row 1 col 2<\/td>\n        <td>row 1 col 3<\/td>\n    <\/tr>\n    <tr>\n        <td colspan=\"3\">This second row spans all three columns<\/td>\n    <\/tr>\n    <tr>\n        <td rowspan=\"2\">This cell spans two rows<\/td>\n        <td>row 3 col 2<\/td>\n        <td>row 3 col 3<\/td>\n    <\/tr>\n    <tr>\n        <td>row 4 col 2<\/td>\n        <td>row 4 col 3<\/td>\n    <\/tr>\n<\/table><\/pre>\n\n
Will result in<\/p>\n\n\n\n\n\n\n\n
row 1 col 1<\/td>\nrow 1 col 2<\/td>\nrow 1 col 3<\/td>\n<\/tr>\n
This second row spans all three columns<\/td>\n<\/tr>\n
This cell spans two rows<\/td>\nrow 3 col 2<\/td>\nrow 3 col 3<\/td>\n<\/tr>\n
row 4 col 2<\/td>\nrow 4 col 3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n
Note that you should not design a table where both rows and columns overlap as this is invalid HTML and the result is handled differently by different web browsers.<\/p>\n\n
rowspan<\/strong> = A non-negative integer that specifies the number of rows spanned by a cell. The default value of this attribute is one (1). A value of zero (0) means that the cell will extend from the current row until the last row of the table (<thead><\/code><\/em><\/strong>, <tbody><\/code><\/em><\/strong>, or <tfoot><\/em><\/strong><\/code>).<\/p>\n\n
colspan<\/strong> = A non-negative integer that specifies the number of columns spanned by the current cell. The default value of this attribute is one (1). A value of zero (0) means that the cell will extend from the current to the last column of the column group <colgroup><\/code><\/em><\/strong> in which the cell is defined.<\/p>\n\n
Column Groups<\/h3>\n\n
Sometimes you may want to apply styling to a column or group of columns. Or for semantic purposes, you may want to group columns together. To do this, use <colgroup><\/code><\/em><\/strong> and <col><\/em><\/strong><\/code> elements.<\/p>\n\n
The optional <colgroup><\/code><\/em><\/strong> tag allows you to group columns together. <colgroup><\/code><\/em><\/strong> elements must be child elements of a <table><\/code><\/em><\/strong> and must come after any <caption><\/code><\/em><\/strong> elements and before any table content (e.g., <tr>, <thead>, <tbody><\/code><\/em><\/strong>, etc.).<\/p>\n\n
<table>\n    <colgroup span=\"2\"><\/colgroup>\n    <colgroup span=\"2\"><\/colgroup>\n    ...\n<\/table><\/pre>\n\n
The optional <col><\/code><\/em><\/strong> tag allows you to reference individual columns or a range of columns without applying a logical grouping. <col><\/code><\/em><\/strong> elements are optional, but if present, they must be inside a <colgroup><\/code><\/em><\/strong> element.<\/p>\n\n
<table>\n    <colgroup>\n        <col id=\"MySpecialColumn\" \/>\n        <col \/>\n    <\/colgroup>\n    <colgroup>\n        <col \/>\n        <col span=\"2\" \/>\n    <\/colgroup>\n    ...\n<\/table><\/pre>\n\n
The following CSS styles can be applied to <colgroup><\/code><\/em><\/strong> and <col><\/code><\/em><\/strong> elements:<\/p>\n\n