表格标记
2020-01-11 本文已影响0人
WhiteStruggle
表格标记
组成
表格 <table>
table属性：border-collapse：默认值（separate）单元格会有间隔，取值为（cillapse）时单元格不会有间隙
<caption>——表格标题
行 <tr>
列 <td>
<th>——表格表头属性（scope和headers属性）
<tbody>——标签
<template>是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化
将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理<template>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。（来自MDN）
<colgroup>——表格列组标签用来定义表中的一组列表
属性：span该属性值为一个正整数，表示该 <col> 元素横跨的列数。默认值为1
<col> —— 定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于<colgroup>元素内。
属性：span该属性值为一个正整数，表示该 <col> 元素横跨的列数。默认值为1
<thead>——定义了一组定义表格的列头的行。
<tfoot>——表尾 ，定义了一组表格中各列的汇总行。
合并前提要合并的单元格为空（没有表示）
行合并：td加属性：colspan="number",合并几列number就等于几
列合并：在td加属性：rowspan="number"
单元格合并：
例如：
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
<tr>
<td>小明</td>
<td>25</td>
<td>100</td>
</tr>
<tr>
<td>小华</td>
<td>36</td>
<td>85</td>
</tr>
</table>
</body>
表格外边框属性
border——控制表格边框的宽度——整数——单位：像素
cellspacing——控制单元格边框到表格边框的距离——单位像素
cellpadding——控制单元格内文字到单元格边框的距离——单位：像素
<table
border="5"//边框线的宽度
cellspacing="16px" //单元格到边框的距离
cellpadding="10px"//单元格文字 到 单元格边框的距离
bordercolor="red"//所有边框的颜色
height="250px" width="500px"//所有表格的 长、宽
>
例子：
表格属性
width——控制表格的宽度——整数：单位：像素——值为百分数，表示表格宽度为整个网页宽度的百分之几
<td width="500px">25</td>//只要改变一行，整竖列也会随之改变
height——控制表格的高度，取值与width相似
<tr height="500px" >
bgcolor——设置表格的背景色
<tr bgcolor="#009700">
align——用于控制整个表格在网页水平方向的对齐方式
行、列属性
height——高度
<tr height="500px">//宽度width没效果
bordercolor——边框颜色，用不了，但可以在整体用
<table bordercolor="red">
bgcolor——单元格背景颜色
<td bgcolor="#009700">小明</td>
align——本行水平方向上对齐方式（center、left、right）
<tr align="right">
valign——本行垂直方向的对齐方式（top上对齐、middle居中对齐、buttom下对齐）
<tr valign="bottom">
单元格的属性
bordercolor——边框颜色
bgcolor——背景颜色
align、valign——水平，垂直对齐方式
colspan——合并右方单元格，达到水平延伸效果
rowspan——合并下方单元格，达到垂直延伸效果
注意：直接链接一个空的单元格，不存在的
<th height="250px" width="500px">姓名</th>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body >
<table
border="3"
bordercolor="red"
cellpadding="20px"
>
<tr height = "100px" bgcolor="green">
<th width="200px" >姓名</th>
<th>年龄</th>
<th>学历</th>
</tr>
<tr align="center" valign="middle"">
<td bgcolor="red">张三</td>
<td>20</td>
<td>本科</td>
</tr>
<tr align="center" valign="top">
<td bgcolor="red">李四</td>
<td>25</td>
<td>研究生</td>
</tr>
<tr>
<td bgcolor="red" rowspan="2" align ="center" valign="niddle">总结</td>
<td colspan="2" align="center" bgcolor="#aa0aa0">Lorem ipsum dolor sit amet consectetur.</td>
</tr>
<tr center>
<td colspan="2" rowspan="2" align="center" bgcolor="#ffff00">什么鬼？</td>
</tr>
</table>
</body>
</html>
