表格基础用法

最新推荐文章于 2024-07-17 22:03:04 发布

呆码王子

最新推荐文章于 2024-07-17 22:03:04 发布

阅读量212

点赞数 1

分类专栏： HTML 文章标签： excel Powered by 金山文档

本文链接：https://blog.csdn.net/L123456llljdjdbd/article/details/129266114

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

表格：

表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，

表格就是用来表示一些格式化的数据的，比如：课程表、银行对账单

在网页中也可以来创建出不同的表格。

1、在HTML中，使用table标签来创建一个表格

2、在table标签中使用tr来表示表格中的一行，有几行就有几个tr

3、在tr中需要使用td来创建一个单元格，有几个单元格就有几个td

4、border="1" width="40%" align="center"

5、rowspan 合并行单元格

6、colspan 合并列单元格

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>表格</title>
  </head>
  <body>
    <table border="1" width="500" align="center">
      <tr>
        <td>序号</td>
        <td>组长</td>
        <td>组员</td>
        <td>组员</td>
        <td rowspan="5">1</td>

      </tr>
      <tr>
        <td>1</td>
        <td>张三</td>
        <td>张四</td>
        <td>张五</td>

      </tr>
      <tr>
        <td>2</td>
        <td>李三</td>
        <td>李四</td>
        <td>李五</td>
      </tr>
      <tr>
        <td>3</td>
        <td>赵三</td>
        <td>赵四</td>
        <td>赵五</td>
      </tr>
      <tr>
        <td>合计</td>
        <td colspan="3"></td>
      </tr>
    </table>
  </body>
</html>

表格样式；

表格边框：border

表格的宽：width

表格居中：margin: 0 auto;

单线边框： border-spacing:0px ;或border-collapse:collapse;

背景颜色：background-color: pink;

td文字在表格中的位置：文本水平居中效果：text-align: center;

td文字在表格中的位置：文本垂直居中效果：vertical-align:middle;

隔行变色：tr:nth-child(even/2n)或tr:nth-child(odd/2n+1)

鼠标移入到tr以后，改变颜色： tr:hover

<body>
    <!--table是一个块元素-->

    <table>
      <tr>
        <!-- 可以使用th标签来表示表头中的内容，
                        它的用法和td一样，不同的是它会有一些默认效果 -->

        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>住址</th>
      </tr>
      <tr>
        <td>1</td>
        <td>孙悟空</td>
        <td>男</td>
        <td>花果山</td>
      </tr>
      <tr>
        <td>2</td>
        <td>猪八戒</td>
        <td>男</td>
        <td>高老庄</td>
      </tr>
      <tr>
        <td>3</td>
        <td>沙和尚</td>
        <td>男</td>
        <td>流沙河</td>
      </tr>
      <tr>
        <td>4</td>
        <td>唐僧</td>
        <td>男</td>
        <td>女儿国</td>
      </tr>
    </table>
  </body>

呆码王子

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
表格基础用法

隔行变色：tr:nth-child(even/2n)或tr:nth-child(odd/2n+1)td文字在表格中的位置：文本垂直居中效果：vertical-align:middle;td文字在表格中的位置：文本水平居中效果：text-align: center;表格在日常生活中使用的非常的多，比如excel就是专门用来创建表格的工具，2、在table标签中使用tr来表示表格中的一行，有几行就有几个tr。3、在tr中需要使用td来创建一个单元格，有几个单元格就有几个td。在网页中也可以来创建出不同的表格。
复制链接

扫一扫