表格、字符实体基础详解

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>&lt;</div>

1.2 常见字符实体

<!-- 空格 &nbsp; -->
<!-- < &lt; -->
<!-- > &gt; -->
<!-- 版权符号 &copy; -->
<div>
    &copy;
</div>

注意：实体名称对大小写敏感

提示：使⽤实体名⽽不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不⽀持所有实体名称 （对实体数字的⽀持却很好）。

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<!--&lt;-->	<!--&#60;-->
>	大于号	<!--&gt;-->	<!--&#62;-->
&	和号	<!--&amp;-->	<!--&#38;-->
"	引号	<!--&quot;-->	<!--&#34;-->
'	撇号	<!--&apos;--> (IE不支持)	<!--&#39;-->
￠	分（cent）	<!--&cent;-->	<!--&#162;-->
£	镑（pound）	<!--&pound;-->	<!--&#163;-->
¥	元（yen）	<!--&yen;-->	<!--&#165;-->
€	欧元（euro）	<!--&euro;-->	<!--&#8364;-->
§	小节	<!--&sect;-->	<!--&#167;-->
©	版权（copyright）	<!--&copy;-->	<!--&#169;-->
®	注册商标	<!--&reg;-->	<!--&#174;-->
™	商标	<!--&trade;-->	<!--&#8482;-->
×	乘号	<!--&times;-->	<!--&#215;-->
÷	除号	<!--&divide;-->	<!--&#247;-->