HTML表格【2019-5-10】

1、表格标签 table

  • <table></table> 用来定义表格,
  • <tr></tr> 用来定义行,嵌套在 <table></table> 中
  • <td></td> 用来定义行中的单元格,嵌套在 <tr></tr> 中
  • <tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相当于一个容器,可以嵌套任意元素

表格相关的属性如下:

HTML表格【2019-5-10】

三参为0  border   cellspacing    cellpadding   三个参数为0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table cellspacing="3" cellpadding="2" border="1" align="left">
    <tr>
        <td>第一行第1列</td>
        <td>第一行第2列</td>
        <td>第一行第3列</td>
    </tr>
    <tr>
        <td>第二行第1列</td>
        <td>第二行第2列</td>
        <td>第二行第3列</td>
    </tr>
</table>
</body>
</html>

2、表头标签

  • 表头一般位于表格的第一行或者第一列。
  • 表头标签为 <th></th>,在显示的时候默认会显示为加粗的效果
  • 增加表头时,使用 <th></th> 替代对应位置的 <td></td>即可

下图即是设置了表头的表格。

HTML表格【2019-5-10】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表头</title>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="10" align="center">
    <caption>caption标签是啥?标题?</caption>
    <tr>
        <th>属性</th>
        <th>含义</th>
        <th colspan="2">取值</th>
    </tr>
    <tr>
        <th>border</th>
        <td>单元格边框</td>
        <td>像素值,默认0</td>
        <td rowspan="3">rowspan从当前单元格向下跨三行</td>
    </tr>
    <tr>
        <th>cellspacing</th>
        <td>单元格与单元格边框的间距</td>
        <td>像素值,默认2</td>
    </tr>
    <tr>
        <th>cellpadding</th>
        <td>单元格内容与单元格边框的间距</td>
        <td>像素值,默认1</td>
    </tr>
</table>
</body>
</html>

3、表格结构(了解)

使用表格时,可以将表格分为头部、主体、页脚(页脚有兼容问题)

  • <thead></thead> 用来定义头部。必须位于 <table></table> 中,一般包含网页的logo和导航等头部信息。
  • <tbody></tbody> 用来定义表格的主体,一般包含网页中除头部和底部之外的其他内容。
HTML表格【2019-5-10】
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>thead+tbody</title>
</head>
<body>
<table cellspacing="2" cellpadding="10" align="center" border="1">
    <thead>
    <tr>
        <th>属性名称</th>
        <th>含义</th>
        <th>取值</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>colspan</td>
        <td>向右横跨几列</td>
        <td>数值</td>
    </tr>
    <tr>
        <td>rowspan</td>
        <td>向下竖跨几行</td>
        <td>数值</td>
    </tr>

    </tbody>
</table>
</body>
</html>

4、表格标题标签 caption

  • <caption></caption> 标签用来定义标题的标签
  • 必须写在 <table></table> 中,和 <thead></thead>平级

相关代码可以参考 表头标签 的代码。

5、单元格合并

  • 适用于 <td></td>、<th></th>
  • colspan 跨列合并(水平合并)
  • rowspan 跨行合并(垂直合并)

相关代码可以参考 表头标签 的代码。

 

原创文章,作者:老K,如若转载,请注明出处:http://www.laoking.net/zixue/qianduan/201910680.html

联系我们

400-800-8888

在线咨询:点击这里给我发消息

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息