在HTML中，我们可以使用<br>标签来实现表格中的换行。<br>标签是一个空元素，它的作用是将文本内容与其后的元素分隔开，形成一个换行符，在表格中使用<br>标签时，需要注意的是，它只会影响到紧跟在<br>标签后面的单元格，如果需要跨越多行，可以使用CSS样式来实现。
下面是一个简单的示例：
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; } </style> </head> <body> <h2>HTML表格换行示例</h2> <table> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td><br></td> </tr> <tr> <td>李四</td> <td><br></td> </tr> </table> </body> </html>
在这个示例中，我们使用了<br>标签来实现表格中的换行，当浏览器渲染这个页面时，你会看到如下效果：
姓名|年龄
---|--
张三|
李四|
通过这种方式，我们可以在HTML表格中实现换行，这种方法有一个局限性，那就是它只能在表格的单元格内部实现换行，如果需要跨越多行，我们需要使用CSS样式来实现。
下面是一个使用CSS样式实现跨行的示例：
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
td {
white-space: pre-line; /* 让单元格内的文字自动换行 */
}
</style>
</head>
<body>
<h2>HTML表格换行示例(使用CSS)</h2>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
</tr>
<tr>
<td style="white-space: pre-line;">李四</td> <!-为跨行的单元格添加样式 -->
</tr>
</table>
</body>
</html>
在这个示例中，我们为跨行的单元格添加了white-space: pre-line;样式，当浏览器渲染这个页面时，你会看到如下效果：
姓名|年龄
---|--
张三|李四
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/194215.html
微信扫一扫 