前端学习---第四天HTML表格

最新推荐文章于 2023-07-21 15:54:50 发布

岁秋

最新推荐文章于 2023-07-21 15:54:50 发布

阅读量310

点赞数 1

分类专栏：前端学习文章标签： html

本文链接：https://blog.csdn.net/m0_46476764/article/details/108813407

版权

前端学习专栏收录该内容

24 篇文章 1 订阅

订阅专栏

HTML表格

1.表格结构

直接上例子了解，table , tr , td , th；
‘tr’ 代表 ‘table row’ 行；
‘td’ 代表 ‘table data’ 列；
‘th’ 代表 ‘table header’ 标题表头，有默认效果–加粗居中；

<table>
  <tr>
    <th>&nbsp;</th>
    <th>Knocky</th>
    <th>Flor</th>
    <th>Ella</th>
    <th>Juan</th>
  </tr>
  <tr>
    <th>Breed</th>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <th>Owner</th>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <th>Eating Habits</th>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

在这里插入图片描述

2. colspan 列数和 rowspan行数

单元格跨越多列或多行，比如, colspan=“2” 使一个单元格的宽度是两个单元格。
colspan:横向合并单元格；
rowspan：纵向合并单元格；
应用例子

<td colspan="2" align="center"><input type="submit" name="submit" value="提交"/></td>

3. col 和 colgroup

定义整列数据的样式信息

<table>
      <colgroup>
        <col span="2">
        <col style="background-color:#97DB9A;">
        <col style="width:42px;">
        <col style="background-color:#97DB9A;">
        <col style="background-color:#DCC48E; border:4px solid #C1437A;">
        <col span="2" style="width:42px;">
      </colgroup>

4.caption

为你的表格增加一个标题
例子;

<table>
<caption>
这是一个标题
</caption>
。。。。。。。

5.表格的样式设置

表格默认是没有边框线的所以要加上边框样式等

1.设置表格宽度

table{
width:100px;//宽度设置
margin:0px auto;//设置居中
border:1px solid black;//为边框设置一个外框
}
td{
border:1px solid black;//为每格设置一个框；
}

例图：
原始表格：
在这里插入图片描述
为table设置样式后：

再为td设置样式后：

2.table和td

根据上面的图片，会发现，为table和td设置的都是实线，最后却显示出来双实线的效果，为什么？
因为table和td边框之间默认有一个距离。
如何设置？

border-spacing：这个属性可以设置该距离。
border-spacing:0px;即消除了距离，也可以为其他效果设置其他值。
例图：
border-collapse：前面可以看到实线非常粗，因为那是重合后的。而border-collapse就可以设置表格的边框合并。
border-collapse:collapse;合并边框；
效果：

如果设置了border-collapse，border-spacing就会自动失效。

3.使用伪元素隔行设置样式

：hth-child（n） :选择器匹配父元素中的第 n 个子元素，元素类型没有限制。该选择器匹配同类型中的第 n 个同级兄弟元素。
n 可以是一个数字，一个关键字，或者一个公式。
常用：odd：奇数；even：偶数；
tr:nth-child(odd){color:yellowgreen;}
图示：
在这里插入图片描述

6.长表格

有一些情况下表格需要非常长（银行流水），这是就需要将表格分为三个部分，表头，表格的主体，表格的底部。（这样的作法有利于打印时的处理，比如表格很长要打印几页，这时普通的表格中间几页的数据就会显得没头尾，不知道代表什么，这时就可以通过表头处理）
HTML中有三个标签：

thead：表头；
tbody：表格主体；
tfoot：表格底部；
这三个标签作用为区分表格的不同部分，它们都是table的子标签，需要写在table里面。而tr写在这些标签中。

<table>
<thead>//thead的内容永远是在表格头部显示。
<tr>
<th></th>
</tr>
</thead>
<tbody>//永远显示在表格中间
<tr>
<td></td>
</tr>
</tbody>
<tfoot>//tfoot的内容永远在底部显示，就算是放前面一样。
<tr>
<td></td>
</tr>
</tfoot>
</table>