1 表格标签
1.1 表格基础标签
在过去表格标签⽤的⾮常多,很多⽹站都是⽤表格标签进⾏布局,展示数据的。
-
table:表格
-
tr:table rows ⾏
-
td:table dock 单元格
表格标签之间是相互嵌套的。table>tr>td
如果我们需要添加表头的语义,可以使⽤⼀个新的标签,th标签,th:table head 表示表头单元格,替换的是td的位置,table>tr>th
<table> <tr> <th></th> <th></th> <th></th> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
表格宽高
表格的宽和⾼默认是按照内容的尺⼨⾃适应调整的。我们可以通过给table标签和td标签设置width/heigh属性的⽅式来指定表格/单元格的宽/⾼。
如果给td设置width和height,会修改当前单元格的宽和⾼,但不会影响这个表格的宽和高。
1.2 属性
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
align:内容⽔平对⻬⽅式
valign:内容垂直对⻬⽅式
<table border="1" width="600px" height="200px" cellpadding="0" cellspacing="0" align="center"> <tr align="center" valign="center"> <td>疾⻛剑豪</td> <td>中单</td> <td>狂⻛绝息斩</td> <td>6300</td> </tr> <tr> <td>疾⻛剑豪</td> <td>中单</td> <td>狂⻛绝息斩</td> <td>6300</td> </tr> <tr> <td>疾⻛剑豪</td> <td>中单</td> <td>狂⻛绝息斩</td> <td>6300</td> </tr> </table>
1.3 合并单元格
rowspan:合并列方向单元格
colspan:合并行方向单元格
属性值是⼀些数字,表示合并单元格的数量
上边线在同⼀⾏的,就算在同⼀⾏
<table border="1"> <tr> <td colspan="2">UZIYYDS</td> <td>adc</td> <td>我去洗个澡</td> <td>4800</td> </tr> <tr> <td>孤⼉索</td> <td>疾⻛剑豪</td> <td>中单</td> <td>狂⻛绝息斩</td> <td rowspan="2">6300</td> </tr> <tr> <td>⼈⻢</td> <td>战争之影</td> <td>打野</td> <td>⻢踏⻜箭</td> </tr> </table>
1.4 表格分区
标题:caption
表头:thead
页脚:tfoot
主体:tbody
语义化标签。
tfoot的位置在thead与tbody之间
这四个表格分区标签本身没有任何样式,仅仅是⼀个区块划分标记罢了
<table border="1" width="600px" height="200px"> <caption>英雄介绍</caption> <thead> <tr> <td colspan="2">UZIYYDS</td> <td>adc</td> <td>我去洗个澡</td> <td>4800</td> </tr> </thead> <tfoot> <tr> <td colspan="4">总计</td> <td>17400</td> </tr> </tfoot> <tbody> <tr> <td>孤⼉索</td> <td>疾⻛剑豪</td> <td>中单</td> <td>狂⻛绝息斩</td> <td rowspan="2">6300</td> </tr> <tr> <td>⼈⻢</td> <td>战争之影</td> <td>打野</td> <td>⻢踏⻜箭</td> </tr> </tbody> </table>
2 字符实体
在 HTML 中,某些字符是预留的, HTML 中的预留字符必须被替换为字符实体。
比如:标签的小于号和大于号
1.1 格式
&entity_name; 或者 &#entity_number;
<div><</div>
1.2 常见字符实体
<!-- 空格 --> <!-- < < --> <!-- > > --> <!-- 版权符号 © --> <div> © </div>
注意:实体名称对大小写敏感
提示:使⽤实体名⽽不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不⽀持所有实体名称 (对实体数字的⽀持却很好)。
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 | |||
< | 小于号 | <!--<--> | <!--<--> |
> | 大于号 | <!-->--> | <!-->--> |
& | 和号 | <!--&--> | <!--&--> |
" | 引号 | <!--"--> | <!--"--> |
' | 撇号 | <!--'--> (IE不支持) | <!--'--> |
¢ | 分(cent) | <!--¢--> | <!--¢--> |
£ | 镑(pound) | <!--£--> | <!--£--> |
¥ | 元(yen) | <!--¥--> | <!--¥--> |
€ | 欧元(euro) | <!--€--> | <!--€--> |
§ | 小节 | <!--§--> | <!--§--> |
© | 版权(copyright) | <!--©--> | <!--©--> |
® | 注册商标 | <!--®--> | <!--®--> |
™ | 商标 | <!--™--> | <!--™--> |
× | 乘号 | <!--×--> | <!--×--> |
÷ | 除号 | <!--÷--> | <!--÷--> |