从前端小白到前端大熬夜篇，第四天

最新推荐文章于 2024-08-14 10:15:39 发布

一只琳娜

最新推荐文章于 2024-08-14 10:15:39 发布

阅读量183

点赞数 1

文章标签： html html5

本文链接：https://blog.csdn.net/my_prince/article/details/106953303

版权

HTML下

停更了一个月用于期末的课程考试和社会实践，今天开始接着以前的内容学习。这次的内容主要讲表格，种地但包括：
1.表格框架标签
2.表格属性
3.案例-小说排行榜单实现

1.表格标签表格用于整齐的展示数据或者图片
<table></table>定义表格
<th></th>表头（表格的第一行）标签，行内容加粗居中
<tr></tr>定义表格中的行,必须写在<table></table>标签中
<td></td>定义表格中的单元格，必须写在<tr></tr>中
写法：

<table>
	<tr>
	<th>单元格中的文字</th>
	.......
	</tr>
	<tr>
		<td>单元格中的文字</td>
		......
	</tr>
	......
</table>

2.表格属性，写在<table>里面，在html还不太用，css常用
align ：表格对其方式 left，center，right
border ：表格边框，1或“”
cellpadding ：规定单元边沿与其内容之间的空白距离
cellspacing：规定单元格之间的空白，默认为2像素
width：规定单元格的宽度
height：规定单元格的高度
写法：

<table align="center" border="1" cellpadding="0" cellspacing="0" width="200" height="100">
	....
	....	
</table>

3.案例实现

实现内容：
表格结构
1、第一行里面是th表头单元格
2、第二行开始里面是td普通单元格
3、单元格里面可以放任何元素
后书写表格属性
1、用到宽度高度边框cellpadding和cell spacing
2、表格浏览器中对齐align
代码块：
（书名除了天宫都是乱起的，封面是自己画的）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日小说排行榜</title>
</head>

<body>
    <table align="center" weight="500" height=" 500 " border="1 " cellspacing="0 ">
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>封面</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1.</td>
            <td>《中国服饰》</td>
            <td><img src="imgs/扇子旗袍.jpg " width="40 "></td>
            <td>123</td>
            <td>456</td>
            <td><a href="# ">贴吧</a> <a href="# ">百度链接</a> <a href="# ">blibli</a></td>

        </tr>
        <tr>
            <td>2.</td>
            <td>《天官赐福》</td>
            <td><img src="imgs/花.jpg " width="40 "></td>
            <td>123</td>
            <td>456</td>
            <td><a href="# ">贴吧</a> <a href="# ">百度链接</a> <a href="# ">blibli</a></td>

        </tr>
        <tr>
            <td>3.</td>
            <td>《漫画手养成记》</td>
            <td><img src="imgs/别拍我，嘻嘻.jpg " width="40 "></td>
            <td>123</td>
            <td>456</td>
            <td><a href="# ">贴吧</a> <a href="# ">百度链接</a> <a href="# ">blibli</a></td>

        </tr>
        <tr>
            <td>4.</td>
            <td>《文艺》</td>
            <td><img src="imgs/头像插画.jpg " width="40 "></td>
            <td>123</td>
            <td>456</td>
            <td><a href="# ">贴吧</a> <a href="# ">百度链接</a> <a href="# ">blibli</a></td>

        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td><img></td>
            <td>...</td>
            <td>...</td>
            <td><a href="# ">...</a> <a href="# ">...</a> <a href="# ">...</a></td>

        </tr>
    </table>

</body>

</html>

结果图：
在这里插入图片描述

一只琳娜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从前端小白到前端大熬夜篇，第四天

HTML下1.表格标签表格用于整齐的展示数据或者图片<table></table>定义表格<th></th>表头（表格的第一行）标签，行内容加粗居中<tr></tr>定义表格中的行,必须写在<table></table>标签中<td></td>定义表格中的单元格，必须写在<tr></tr>中写法：<table> <tr> &
复制链接

扫一扫