Related Topics
HTML
CSS
HTML
<table>
<tr>
<td colspan="3">This cell spans three columns</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>
In the above example, the first row contains only one cell that spans across three columns using the colspan="3" attribute. The second row contains three cells, each in its respective column.
<table>
<tr>
<td>This is a long sentence that will wrap within the table cell.</td>
</tr>
</table>
In both cases, the text will wrap within the table cell instead of stretching to fit the width of the cell.
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
In the above example, the <hr> tag is placed within a table cell that spans both columns (using colspan="2") to create a horizontal line that spans the entire width of the table. The line is positioned in its own row to separate the content above and below it.
You can also use CSS to style the horizontal line, such as changing the color, thickness, and style. For example, you could use the following CSS to make the line thicker and change its color:
hr {
border: none;
border-top: 2px solid #ccc;
}
You can place this CSS in a <style> tag within the head of the HTML document, or in an external CSS file.
<table>
<tr>
<th>Product Name</th>
<th>Price</th>
</tr>
<tr>
<td>Widget</td>
<td>$10.00</td>
</tr>
<tr>
<td>Gadget</td>
<td>$15.00</td>
</tr>
</table>
In the above example, the <th> element is used for the header cells “Product Name” and “Price”. These cells contain column headings that provide context for the data in the table.
The <td> element is used to represent data cells in a table. Data cells contain the actual data that is being presented in the table. By default, data cells are left-aligned and their content is displayed with a regular font size. Here’s an example of using <td> for data cells:
<table>
<tr>
<th>Product Name</th>
<th>Price</th>
</tr>
<tr>
<td>Widget</td>
<td>$10.00</td>
</tr>
<tr>
<td>Gadget</td>
<td>$15.00</td>
</tr>
</table>
In the above example, the <td> element is used for the data cells “Widget” and “$10.00”, and “Gadget” and “$15.00”. These cells contain the actual data being presented in the table.
In summary, <th> elements are used for header cells, while <td> elements are used for data cells. The difference in appearance between <th> and <td> cells is subtle, but using the appropriate element for each type of cell can improve the accessibility and organization of the data in the table.
Popular Category
Topics for You
CSS
Go through our study material. Your Job is awaiting.