HTML基础表格

最新推荐文章于 2021-08-23 17:24:49 发布

S_yeol

最新推荐文章于 2021-08-23 17:24:49 发布

阅读量176

点赞数

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.csdn.net/qq_45228525/article/details/109287280

一、基础表格

HTML表格

  * <table>表格
    *  <tr>行
        * <td>单元格
        *  </td>单元格
     *  </tr>行
   * <table>表格

XXXX	XXXX	XXXX	XXXX
XXXX	XXXX	XXXX	XXXX
XXXX	XXXX	XXXX	XXXX

HTML表格标签

* <th></th>居中加粗效果
* <caption></caption>带标题的表格

带结构的表格

表格划分3部分：表头、主体、脚注
thead：表格的头部（放在表格的表头）
tbody：表格的主体（放数据的本体）
tfoot：表格的脚（放表格的脚注）

<table>
  <caption>...</caption>
    <thead>
        <tr>
            <th>表头</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>主体</td>
        </tr>
    </tbody>

<tfoot>
    <tr>
        <td>脚注</td>
    </tr>
 </tfoot>
</table>

表格属性

属性	值	描述
width	Pixls、%	规定表格的宽度
align	left center right	表格相对周围元素的对齐方式
border	pixels	规定表格边框的宽度
bgcolor	rgb、#、colorname	表格的背景颜色
cellpadding	Pixls、%	单元边沿其内容之间的空白
cellspacing	Pixls、%	单元格之间的空白
frame	属性值	规定外侧边框哪个部分是可见的
rules	属性值	规定内侧边框哪个部分是可见的

属性	值	描述
frame	void	不显示外侧边框
	above	显示上部的外侧边框
	below	显示下部的外侧边框
	hsides	显示上部和下部的外侧边框
	vsides	显示左边和右边的外侧边框
	lhs	显示左边的外侧边框
	rhs	显示右边的外侧边框
	box	在所有四个边上显示外侧边框
	border	在所有四个边上显示外侧边框

属性	值	描述
rules	none	没有线条
	groups	位于行和列组之间的线条
	rows	位于行之间的线条
	cols	位于列之间的线条
	all	位于行和列之间的线条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格操作</title>
</head>
<body>
    <!--创建2行3列表格-->
    <table border="6" width="500px" bgcolor="#f2f2f2" cellspacing="0"
    cellpadding="5" align="center" frame="lhs" rules="rows">
        <caption>学年学费公示</caption>
        <thead>
        <tr>
            <th>学年</th>
            <th>2018年</th>
            <th>2018年</th>
            <th>2019年</th>
            <th>2020年</th>
        </tr>
        <tr>
            <th>第一学年</th>
            <th>1000</th>
            <th>800</th>
            <th>1500</th>
            <th>700</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>第二学年</td>
            <td>1000</td>
            <td>1200</td>
            <td>500</td>
            <td>1300</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td>总计</td>
            <td>2000</td>
            <td>2000</td>
            <td>2000</td>
            <td>2000</td>
        </tr>
        </tfoot>
       
    </table>
</body>
</html>

在这里插入图片描述