Related Topics
HTML
CSS
HTML
<table>
<tr>
<td>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</td>
<td>
<p>This is some text in a cell.</p>
<p>This is some more text in the same cell.</p>
</td>
</tr>
</table>
In this example, we have a table with two rows (<tr> elements). In the first row, we have two cells (<td> elements). The first cell contains a nested table with two rows and two columns. The second cell contains two paragraphs of text.
Note that you can also nest tables multiple levels deep if you need to. However, it’s generally best to avoid using nested tables whenever possible, as they can be difficult to read and maintain. It’s usually better to use CSS to style your tables and cells instead.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
In this example, the border attribute is set to 1, which creates a border around the table and its cells with a width of 1 pixel.
Note that the border attribute is considered deprecated in HTML5, and it’s generally better to use CSS to style your table borders instead. Here’s an example of how you could set a table border using CSS:
table {
border-collapse: collapse;
border: 1px solid black;
}
th, td {
border: 1px solid black;
padding: 5px;
}
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
In this example, we use the border-collapse property to collapse the table borders, and we set a border on both the <table> element and its <th> and <td> cells using the border property. We also set some padding on the cells to make the content look nicer.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td bgcolor="yellow">Row 1, Column 1</td>
<td bgcolor="#ffcccc">Row 1, Column 2</td>
</tr>
<tr>
<td bgcolor="#66ccff">Row 2, Column 1</td>
<td bgcolor="lightgreen">Row 2, Column 2</td>
</tr>
</table>
n this example, we use the bgcolor attribute to set the background color of each table cell to a different color. The first row contains header cells, which can also have a background color set using the bgcolor attribute.
Note that the bgcolor attribute is considered deprecated in HTML5, and it’s generally better to use CSS to style your table cells instead. Here’s an example of how you could set a background color for a table cell using CSS:
td {
background-color: yellow;
}
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
In this example, we use the background-color property to set the background color of all <td> cells to yellow.
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td align="left">Left-aligned text</td>
<td align="center">Centered text</td>
</tr>
<tr>
<td align="right">Right-aligned text</td>
<td>Default alignment</td>
</tr>
</table>
In this example, we use the align attribute to set the horizontal alignment of the text within the table cells. Note that the align attribute is deprecated in HTML5 and it’s recommended to use CSS instead to control the layout and alignment of tables.
<table>
<caption>Monthly Sales</caption>
<tr>
<th>Month</th>
<th>Revenue</th>
<th>Expenses</th>
<th>Profit</th>
</tr>
<tr>
<td>January</td>
<td>$10,000</td>
<td>$7,000</td>
<td>$3,000</td>
</tr>
<!-- more rows here -->
</table>
In this example, the <caption> element is used to provide a title for the table, “Monthly Sales”. When the table is rendered in a browser, the caption appears centered above the table, providing users with a summary of the table’s content.
Popular Category
Topics for You
CSS
Go through our study material. Your Job is awaiting.