Tables in HTML are used to display data in rows and columns, which makes them useful for organizing information in a grid-like structure.
HTML5 introduced several new elements and attributes to improve the design and accessibility of tables.
HTML5 TABLE ELEMENTS:
| <table> | This element is used to define the table itself. It contains all the rows and columns. |
| <caption> | This element is used to provide a title or description for the table. It is placed directly after the <table> tag and helps users understand the table’s purpose. |
| <thead> | This element groups the header content in a table, typically containing the column headings. It helps separate the header rows from the body rows and improves accessibility. |
| <tbody> | This element groups the body content of the table, which contains the actual data. It is used to separate the main content from the header and footer, enhancing table structure. |
| <tfoot> | This element is used to group the footer content in a table. Typically, it contains summary information or totals and is placed after the <tbody> section. |
| <tr> | This element represents a table row. It is used to group a set of cells (either <th> or <td>) into a single horizontal row. |
| <th> | This element is used to define a table header cell. It is usually bold and centered by default and is used to represent a heading for a column or row. |
| <td> | This element represents a table data cell. It contains the actual data within a table, and it is placed within a <tr> tag. |
HTML TABLE ATTRIBUTES:
1. frame:
Specifies which borders to display around and inside a table.
Possible Values:
| box | Draws borders around the entire table. |
| above | Draws a border above the table. |
| below | Draws a border below the table. |
| lhs (left-hand side) | Draws a border on the left side of the table. |
| rhs (right-hand side) | Draws a border on the right side of the table. |
| void | No borders are drawn at all. |
2. rules:
Specifies which internal borders to display within the table.
Values:
| rows | Draws borders between rows. |
| cols | Draws borders between columns. |
| groups | Draws borders between column groups (<colgroup>) and row groups (<thead>, <tbody>, <tfoot>). |
| all | Draws borders between all cells in the table. |
3. border
Specifies whether the table has a border and how thick it should be.
Values:
- 1 –> Draws a border around the table (or a thin border).
- 0 –> No border is drawn.
4. height:
Defines the height of a table or table cell. In earlier HTML, this was used to set a fixed height for the table or the table rows/cells.
5. width:
Defines the width of the table or table cell. This can be set using pixels (e.g., width=”500″) or percentages (e.g., width=”50%”).
6. align:
Defines the horizontal alignment of the table, rows, columns, or cells.
Values:
| left | Aligns the content to the left. |
| center | Aligns the content to the center. |
| right | Aligns the content to the right. |
7. valign:
Defines the vertical alignment of the content in a cell.
Values:
| top | Aligns content to the top of the cell. |
| center | Aligns content to the center of the cell. |
| bottom | Aligns content to the bottom of the cell. |
8. bgcolor:
Sets the background color of the table or a table cell. The value should be a color code (e.g., #FFFFFF for white or a named color like red).
9. background:
Sets the background image for the table or table cells. You would specify a URL to an image (e.g., background=”image.jpg”).
10. colspan:
Specifies the number of columns a cell should span.
For example, colspan=”2″ means that the cell will span across two columns.
11. rowspan:
Specifies the number of rows a cell should span.
For example, rowspan=”3″ means the cell will span across three rows.
12. cellpadding:
Specifies the amount of space (padding) between the content of the cell and its borders. The value is typically defined in pixels (e.g., cellpadding=”10″).
13. cellspacing:
Defines the space between the cells of a table. Like cellpadding, it is usually specified in pixels (e.g., cellspacing=”5″).
CSS Styling:
| border-collapse: collapse; |
This CSS property makes the borders of the table and cells collapse into a single border instead of being spaced out.
Examples To Pratice:
| <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <link rel=”stylesheet” href=”node_modules/bootstrap-icons/font/bootstrap-icons.css”> <style> table{ border-collapse: collapse; background-size: cover; } </style> </head> <body> <table border=”1″ width=”100%” cellpadding=”10″ background=”img1.jpg” bordercolor=”red”> <caption>IPL POINT TABLE</caption> <thead> <tr height=”100″ bgcolor=”gold” align=”center” valign=”center”> <th colspan=”3″>Team</th> <th>M</th> <th>W</th> <th>L</th> <th>NRR</th> <th>Pts</th> <th colspan=”5″>Last5</th> </tr> <tbody> <tr> <td>1</td> <td><span class=”bi bi-person”></span></td> <td>RCB</td> <td>2</td> <td>2</td> <td>0</td> <td>+2.266</td> <td>4</td> <td><span class=”bi bi-arrow-up-right-circle-fill”></span></td> <td><span class=”bi bi-arrow-down-right-circle-fill”></span></td> <td><span class=”bi bi-circle”></span></td> <td><span class=”bi bi-circle”></span></td> <td><span class=”bi bi-circle”></span></td> </tr> <tr> <td>1</td> <td><span class=”bi bi-person”></span></td> <td>RCB</td> <td>2</td> <td>2</td> <td>0</td> <td>+2.266</td> <td>4</td> <td><span class=”bi bi-arrow-up-right-circle-fill”></span></td> <td><span class=”bi bi-arrow-down-right-circle-fill”></span></td> <td><span class=”bi bi-circle”></span></td> <td><span class=”bi bi-circle”></span></td> <td><span class=”bi bi-circle”></span></td> </tr> <tr> <td>1</td> <td><span class=”bi bi-person”></span></td> <td>RCB</td> <td>2</td> <td>2</td> <td>0</td> <td>+2.266</td> <td>4</td> <td><span class=”bi bi-arrow-up-right-circle-fill”></span></td> <td><span class=”bi bi-arrow-down-right-circle-fill”></span></td> <td><span class=”bi bi-circle”></span></td> <td><span class=”bi bi-circle”></span></td> <td><span class=”bi bi-circle”></span></td> </tr> <tr> <td>1</td> <td><span class=”bi bi-person”></span></td> <td>RCB</td> <td>2</td> <td>2</td> <td>0</td> <td>+2.266</td> <td>4</td> <td><span class=”bi bi-arrow-up-right-circle-fill”></span></td> <td><span class=”bi bi-arrow-down-right-circle-fill”></span></td> <td><span class=”bi bi-circle”></span></td> <td><span class=”bi bi-circle”></span></td> <td><span class=”bi bi-circle”></span></td> </tr> </tbody> </thead> <tfoot> <tr> <td colspan=”13″>IPL 2025 DATA</td> </tr> </tfoot> </table> </body> </html> |
Example-2:
| <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> </head> <body> <table width=”100%” border=”1″> <tr> <th colspan=”2″>Full Name</th> <th colspan=”3″>Address</th> </tr> <tr> <th>First Name</th> <th>Last Name</th> <th>HNO</th> <th>City</th> <th>State</th> </tr> <tr> <td> </td> <td> </td> <td> </td> <td rowspan=”5″ align=”center”> <span>H</span><br> <span>Y</span><br> <span>D</span><br> <span>R</span><br> <span>A</span><br> <span>B</span><br> <span>A</span><br> <span>D</span> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html> |
Example-3:
| <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> </head> <body> <table width=”100%” border=”1″> <tr> <td colspan=”3″>Header</td> </tr> <tr height=”300″> <td width=”100″>NAV</td> <td valign=”top”> <table width=”100%” border=”1″ > <tr> <th>CITY</th> <th>STATE</th> <th>NATION</th> <th>PINCODE</th> <th>AREA</th> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </td> <td width=”100″>Aside</td> </tr> <tr> <td colspan=”3″>Footer</td> </tr> </table> </body> </html> |
