HTML设置表格

最新推荐文章于 2024-12-12 19:00:19 发布

转载最新推荐文章于 2024-12-12 19:00:19 发布 · 595 阅读

5 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/belongs-to-qinghua/p/10951021.html

博客介绍了HTML中表格相关操作。一是设置表格内容对齐方式，可通过align属性，给<table>标签设置只能改变整体对齐，给<tr>或<td>设置能实现内容对齐；二是去除表格单元格之间的空隙，并给出了相关代码和效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 设置表格内容对齐方式

在HTML中通常通过align设置对齐方式，文字是： text-align ，表格是：align

如果将align属性设置给<table>标签，只能改变<table>整体的对齐方式，不会影响内容的对齐方式，如下图所示：

<table class="one" align="center">
　　<tr>
　　　　<th>姓名</th>
　　　　<th>年龄</th>
　　　　<th>性别</th>
　　</tr>
　　<tr>
　　　　<td>张三</td>
　　　　<td>18</td>
　　　　<td>男</td>
　　</tr>
　　<tr>
　　　　<td>王五</td>
　　　　<td>22</td>
　　　　<td>男</td>
　　</tr>
</table>

如果希望表格中的内容对齐，那么将align属性设置给<tr>或者<td>就可以实现了，如下图所示：

<table class="one">
　　<tr align="center">
　　　　<th>姓名</th>
　　　　<th>年龄</th>
　　　　<th>性别</th>
　　</tr>
　　<tr align="center">
　　　　<td>张三</td>
　　　　<td>18</td>
　　　　<td>男</td>
　　</tr>
　　<tr align="center">
　　　　<td>王五</td>
　　　　<td>22</td>
　　　　<td>男</td>
　　</tr>
</table>

2.去除表格单元格之间的空隙

从上面两个表格中我们发现单元格与单元格之间存在空隙，去除空隙的代码和效果图如下：

table,td，th {
    border: 1px solid black;
    border-collapse: collapse;
}

转载于:https://www.cnblogs.com/belongs-to-qinghua/p/10951021.html