愿你走出半生，归来仍是少年
学会去做一个优雅的人
万总昨天看我敲标签不亦乐乎的，就开玩笑的说我给你发一份前端的面试题吧，你看看能答多少分，我说好啊，然后看了下，瞬间头皮发麻，有这么恐怖的吗，一个都不会。
整理下昨天的工作：
昨天主要做了HTML表格的相关的工作
实现效果：
图1.1
下面是细节：
1)粗边框
实现效果：
图2.1
实现步骤：
<table border="10">
<tr>
<td>真田幸村</td>
<td>猿飞佐助</td>
</tr>
<tr>
<td>武田信玄</td>
<td>扎克伯格</td>
</tr>
</table>
2)表格头布局标签和表格空单元格
实现效果：
图2.2
实现步骤：
<table>
<tr>
<th>Heading</th>
<th>Another Heading</th>
<th> </th>
</tr>
<tr>
<td>织田信长</td>
<td> </td>
<td>本多忠胜</td>
</tr>
<tr>
<td>张永冲</td>
<td>Fantasychong</td>
<td> </td>
</tr>
</table>
3)无边框表格
实现效果：
图2.3
实现步骤：
<table border="0">
<tr>
<td>张永冲</td>
<td>zhangyongchong</td>
<td>yongchong丶张</td>
</tr>
<tr>
<td>默然相爱</td>
<td>寂静喜欢</td>
<td>啦啦啦啦</td>
</tr>
</table>
4)表格的标题
实现效果：
图2.4
实现步骤：
<table border="1">
<caption>Fantasychongの数码小店</caption>
<tr>
<td>小米笔记本</td>
<td>小米充电宝</td>
<td>小米MIX2</td>
</tr>
<tr>
<td>华为P10</td>
<td>荣耀9</td>
<td>啦啦啦啦</td>
</tr>
</table>
5)横向组合列的表格
实现效果：
图2.5
实现步骤：
<table>
<tr>
<th>手机品牌</th>
<th colspan="3">型号</th>
</tr>
<tr>
<td>小米</td>
<td>MIX2</td>
<td>Honor2</td>
</tr>
<tr>
<td>OPPO</td>
<td>R11</td>
<td>MAX2</td>
</tr>
</table>
6)横向组合行的表格
实现效果：
图2.6
实现步骤：
<table border="1">
<caption>这是个组合行的表格</caption>
<tr>
<th>姓名</th>
<td>Fantasychong正在大杀特杀，勇冠三军，天下无敌</td>
</tr>
<tr>
<th rowspan="3">电话</th>
<td>zhangyongchong</td>
</tr>
<tr>
<td>Fantasychongの数码小店</td>
</tr>
<tr>
<td>how are U</td>
</tr>
</table>
7)表格里的标签元素
<table border="1">
<tr>
<td>
<p>Fantasychong已经接近神啦</p>
<p>Fantasychong已经成为传说啦</p>
</td>
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
<td>
</tr>
<tr>
<td>
<p>这个单元包含了一个列表：</p>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
</td>
<td>
<h1>HELLO</h1>
</td>
</tr>
<tr>
</table>
7)调整表格的单元格边距和间距
实现效果：
图2.7
<table border="1" cellpadding=“10”>
<tr>
<td>第一</td>
<td>第二</td>
</tr>
<tr>
<td>第三</td>
<td>第四</td>
</tr>
</table>
实现效果：
图2.8
实现步骤：
<table border="1" cellspacing="10">
<tr>
<td>第一</td>
<td>第二</td>
</tr>
<tr>
<td>第三</td>
<td>第四</td>
</tr>
</table>
8)设置表格的背景颜色
实现效果：
图2.9
实现步骤：
<table border="1" bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>First</td>
<td>Row</td>
</tr>
</table>
9.设置表格的背景图
实现效果：
图2.10
实现步骤：
<table border="1" background=”xxxxxxxxx.gif”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>First</td>
<td>Row</td>
</tr>
</table>
10.调整表格单元格中内容的对齐方式
实现效果：
图2.11
实现步骤：
<table>
<tr>
<th align="left">消费项目</th>
<th align="right">一月<th>
<th align="right">二月</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$22</td>
<td align="right">$23</td>
</tr>
<tr>
<td align=“left”>食物</td>
<td align="right">$30</td>
<td align="right">$33</td>
</tr>
<tr>
<th align="left">总计</th>
<td align="right">$40</td>
<td align="right">$21</td>
</tr>
</table>
网友评论