单单HTML也可以制作出满足普通需要的表格

asiaqi

已于 2022-07-03 23:18:10 修改

阅读量147

点赞数 2

分类专栏： HTML asiaqi每日打卡文章标签： html 前端

于 2022-07-03 23:06:22 首次发布

本文链接：https://blog.csdn.net/m0_62200674/article/details/125591132

版权

asiaqi每日打卡同时被 2 个专栏收录

17 篇文章 2 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

表格相关标签

<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>&nbsp;</td>  <!--&nbsp处理没有内容的单元格-->

            <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了！）