HTML笔记（4）
HTML笔记（4）
开始今天的学习：
HTML中的注释：
<!--内容-->
特殊字符：
特殊字符 | 字符代码 |
|---|---|
空格 | (Non-breaking space) |
>大于 | >(greater than) |
<小于 | <(less than) |
HTML生成表格
定义表格(table)的标签：
<table></table>
定义表格中的行(table row)：
<tr></tr>
必须嵌套在<table>标签中
定义表格中单元格的内容(table data)：
<td></td>
必须嵌套在<tr>标签中
通常第一行是表头，可以设置表头单元格标签(table head)：
<th>
基本格式如下：
<table>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</table>
表格还有其他的属性：
属性名 | 属性值 | 描述 |
|---|---|---|
align | left/center/right | 规定表格相对周围元素的对齐方式 |
border | 1或"" | 规定表格单元是否拥有边框，默认为""，表示没有边框 |
cellpadding | 像素值 | 规定单元格沿其内容之间的空白，默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
width/height | 像素值或百分比 | 规定表格的宽度/高度 |
做一个示例：
<!-- 设置表格的位置、是否有边框 单元格之间的像素值 内容与单元格之间的像素值 表格的宽度 高度-->
<table align="center" border="1" cellspacing="0" cellpadding="4" width="500" height=200>
<tr> <th>name</th> <th>age</th> <th>gender</th></tr>
<tr> <td>coco </td> <td>12</td> <td>female</td></tr>
<tr> <td>bobo </td> <td>50</td> <td>male</td></tr>
</table>效果如下：
视频中的老师布置了一个案例的作业，尝试了一下（网址是随便填的）：
<table align="center" border="1" cellspacing="0" cellpadding="4" width="500" height="200">
<thead>
<tr>
<th>排名</th>
<th>关键字</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="下.jpg" width=20/></td>
<td>345</td>
<td>123</td>
<td><a href="https://www.baidu.com/s?wd=%E9%AC%BC%E5%90%B9%E7%81%AF" target="_blank">百度</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="下.jpg" width=20/></td>
<td>124</td>
<td>675432</td>
<td><a href="http://www.baidu.com">百度</a></td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="上.jpg" width=20/></td>
<td>212</td>
<td>7654</td>
<td><a href="http://www.baidu.com" target=blank">百度 <a href="#">贴吧</a></a></td>
</tr>
</tbody>
</table>效果如下：
大概就是这个样子，以后学了CSS做会更好。
合并单元格：
跨行（(row)合并/跨列(column)合并
跨列合并colspan | ||
|---|---|---|
跨行合并rowspan | ||
下图分析如何合并：
跨行：最上侧单元格作为目标单元格，写合并代码
跨列：最左侧单元格作为目标单元格，写合并代码
目标单元格（左侧） | （右侧） | |
|---|---|---|
目标单元格（上侧） | ||
（下侧） |
合并步骤：
- 确定是跨行还是跨列
- 找到目标单元格，写上合并方式=合并的单元格的数量。
比如<td colspan="2"></td>
3.删除多余的单元格
现在来尝试一下：
<table align = "center" border="1" width = "300" height="100" cellpadding="5" cellspacing="0">
<!-- 合并单元格 -->
<thead>
<!-- 表头部分 第一行表格 -->
<tr>
<td></td>
<td colspan="2">跨列合并</td>
<!--第三行被删除，因为是多余的，已经被合并了-->
</tr>
</thead>
<tbody>
<!-- 第二行表格 -->
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<!-- 第三行表格 -->
<tr>
<td rowspan="2"> 跨行合并 </td>
<td> </td>
<td> </td>
</tr>
<!-- 第四行表格 -->
<tr>
<!-- 第一行被我删掉了，因为是多余的 -->
<td> </td>
<td> </td>
</tr>
</tbody>
</table>查看效果：
一定要记得删除多余的单元格，否则会出现很多奇奇怪怪的格子，另外这个非常能锻炼到表格的运用，还有对单元格的定位。
腾讯云开发者
