table（表单）

最新推荐文章于 2024-03-05 17:11:53 发布

尤翔宇

最新推荐文章于 2024-03-05 17:11:53 发布

阅读量592

点赞数

文章标签： servlet

原文链接：https://blog.youkuaiyun.com/softlipaaa/article/details/118579691

版权

table（表格）
介绍
合并单元格
colspan（横向合并单元格）
rowspan（纵向合并单元格）
长表格
表格的样式
border-spacing（指定边框之间的距离）
border-collapse（设置边框的合并）
注
将元素设置成单元格实现居中（dispaly:table-cell）
介绍
1、table（表格）可以表示一些格式化数据，例如课程表、人名单、成绩单……

2、在table中使用tr表示表格中的一行，有几个tr就有几行

3、tr中使用td表示一个单元格，有几个td就表示有几个单元格

合并单元格
colspan（横向合并单元格）
示例：

<table>
   <tr>
       <td colspan="2">A</td>
   </tr>
</table>           //一行一列的表格
1
2
3
4
5
6
7
rowspan（纵向合并单元格）
示例：
<table>
   <tr>
       <td rowspan="2">B</td>
   </tr>
</table>           //一行一列的表格

长表格
可以将一个表格分成三个部分

   thead       头部

   tbody       主体

   tfoot       底部

th 表示头部的单元格（有一个加粗的效果）

示例：

<table>

           <tfoot>
               <tr>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
               </tr>
           </tfoot>
</table>

表格的样式
border-spacing（指定边框之间的距离）
示例：

border-spacing:0px;

border-collapse（设置边框的合并）
示例：

border-collapse:collapse;

注
1、如果表格中没有使用 tbody ，而是直接使用 tr ，那么浏览器会自动创建一个 tbody ，并且将 tr 全部放到 tbody 中

tr 不是 table 的子元素

2、默认情况下元素在td中是垂直居中的，可以通过vertical-align来修改

将元素设置成单元格实现居中（dispaly:table-cell）
示例：

   .box1{
           width:300px;

           height:300px;

           background-color:orange;

           `display:table-cell;
           vertical-align:middle;`
       //将元素设置为单元格td，然后设置垂直居中（不推荐用来布局）
   }
————————————————
版权声明：本文为优快云博主「大毛驴啊」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/softlipaaa/article/details/118579691