表格相关标签
<table> <tr> <td><th>
这四个是构成表格的最基础标签。
<table>定义一个表格,<tr>定义行,<td>定义单元格(table data),<th>代表表头。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<html>
<head>
<title>演示</title>
</head>
<table>
<tr>
<!--这样添加的是水平表头,如果要添加垂直的,就可以如下注释一样(本质是当做一个单元格-->
<th>第一列</th>
<th>第二列</th>
</tr>
<tr>
<!-- <th>第一行</th> -->
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
</table>
</body>
</html>
很朴素,接下来有很多属性来优化
表格相关属性
- width 单元格宽度
- hight 单元格高度
- border 边框类型
- align 排列单元格内容
- cell padding 创建单元格内容与其边框之间的空白
- cell spacing 增加单元格之间的距离
- caption 标题
- colspan 单元格跨行数
- rowspan 单元格跨列数
代码示例
<html>
<head>
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="10" cellpadding="20" width="800">
<caption>示例表格</caption>
<tr>
<td> </td> <!-- 处理没有内容的单元格-->
<th>第一列</th>
<th colspan="2">这是一个跨列的单元格</th>
</tr>
<tr>
<th rowspan="2">这是一个跨行的单元格</th>
<td style="background-color: pink;" align="right">靠右了</td>
<!--但是示例中靠右也没有顶到表边,因为一开始设置了cellpadding-->
<td>单元格还可以包含列表
<ul> <!--有序列表始于ol标签-->
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
</td>
</tr>
<tr>
<td align="left">靠左了</td>
<td><a href="http:www.bilibili.com" target="_blank">b站链接</a></td>
</tr>
</table>
</body>
</html>
(这次示例代码缩进这么多是因为我用vsc写而不是notepad++)
效果:
“靠右”、“靠左”没有顶到底是因为前面table用了属性cellpadding
写在最后
- html的知识稍微有些零散,需要自己敲代码才更好得进脑子
- 现在大学生们往往都被绩点浪潮卷着走,分分必争
同时又听着“要根据自己方向学,别只跟着学校”的劝诫,争夺分数的时候又哪有那么多时间呢?
经过大一一年的迷茫,我一拍大腿一咬牙,试一下吧!
学自己好奇的知识,并且学前端这样一个学校不考察的方面。
初中高中甚至大一都是乖巧的好学生,人生不长,想做做自己没体验过的!
所以每天都会打卡发帖子,主要是记录性的,同时也能作为一个查找资料帮助大家。
欢迎关注我,一起打卡,一起走一条自定义的内卷破局之路!
(现在已经day3了!)