html中的表格标签

最新推荐文章于 2025-03-09 20:08:49 发布

原创最新推荐文章于 2025-03-09 20:08:49 发布 · 866 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #前端 #css

六 web前端+vue 专栏收录该内容

9 篇文章

订阅专栏

web是前端的核心，而html又是web的基石。早期的互联网中，主要是利用表格进行布局。近年来，web数据流多采用分层传输，而网页布局也迭代为了div+css，但是学习表格对于了解网络的基础布局很有好处

table,td,tr三种基本的表格标签

table的属性如下：

border
用于在页面中显示出表格的轮廓，轮廓之间会留白。注意border=“int” 等于一个整数值
cellspacing
规定相邻单元格之间的空白，如果cellspacing=“0”，显然就会出现一个只有一条线的边框
align
一般用于设置表格的显示位置，一般默认是左对齐，如果出现align=“center”,那么会变成中间对齐，如果出现align=“right”，那么就会变成靠右对齐
bgcolor
用于设置表格整体的背景颜色

<table border="1" cellspacing="0" align="center" >
        <tr>
             <td>1</td>
             <td>1</td>
             <td>1</td>
        </tr>
         <tr bgcolor="blue">
             <td>1</td>
             <td>1</td>
             <td>1</td>
        </tr>
    </table>

如图所示，是仅仅加入了border="1"边框后的效果：

在这里插入图片描述
下图是加入cellspacing="0"以后的结果：

下图是加入align="center"之后的效果：
在这里插入图片描述

tr的属性如下：

valign
规定表格中行元素的对齐方式
align
一般用于设置表格行中内容的对齐方式，一般默认是左对齐，如果出现align=“center”,那么会变成中间对齐，如果出现align=“right”，那么就会变成靠右对齐
bgcolor
用于设置表格内某一行的背景颜色

bgcolor="blue"示范如图所示：
在这里插入图片描述
td的属性如下：

valign
规定单元格中元素元素的对齐方式
align
一般用于设置单元格中内容的显示位置，一般默认是左对齐，如果出现align=“center”,那么会变成中间对齐，如果出现align=“right”，那么就会变成靠右对齐
bgcolor
用于设置表格内某一格的背景颜色
height
主要用于规定单元格的高度
width
主要用于规定单元格的宽度。
colspan
规定此单元格可以横跨的列数
rolspan
规定此单元格可以横跨的列数

其实也用不着那么花里胡哨，学完这些，基本上可以给咱们自己做一个简单的课程表，虽然很朴素，但是基本的功能还是有的哈
在这里插入图片描述
源代码也很朴实，体验一把自己制作的快乐吧。

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .title {
    text-align: center;
    font-family: "隶书";
    font-size: 3em;
    /* 默认字体大小的3倍 */
    font-weight: bold;
    /*字体加粗*/

  }
</style>

<body>
  <p class="title">
    课程表
  </p>
  <table border="1" width="1200px" align="center" cellspacing="0">

    <tr align="center" >
      <td>日期</td>
      <td>星期一</td>
      <td>星期二</td>
      <td>星期三</td>
      <td>星期四</td>
      <td>星期五</td>
      <td>星期六</td>
      <td>星期日</td>
    </tr>

    <tr align="center">
      <td>第一节课
        <br>
        8:10--8:55
      </td>
      <td></td>
      <td></td>
      <td>计算机网络</td>
      <td></td>
      <td>计算机OS</td>
      <td></td>
      <td></td>
    </tr>
    <tr align="center">
      <td>第二节课
        <br>
        9:00--9:45
      </td>
      <td></td>
      <td></td>
      <td>计算机网络</td>
      <td></td>
      <td>计算机OS</td>
      <td></td>
      <td></td>
    </tr>

    

    <tr align="center">
      <td>第三节课
        <br>
        10:00--10:45
      </td>
      <td>微机原理</td>
      <td>并行计算</td>
      <td>计算机OS</td>
      <td>微机原理</td>
      <td>Paper写作</td>
      <td></td>
      <td></td>
    </tr>

    <tr align="center">
      <td>第四节课
        <br>
        10:50--11:35
      </td>
      <td>微机原理</td>
      <td>并行计算</td>
      <td>计算机OS</td>
      <td>微机原理</td>
      <td>Paper写作</td>
      <td></td>
      <td></td>
    </tr>

    <tr align="center">
      <td>第五节课
        <br>
        13:15--14:00
      </td>
      <td>分布式计算</td>
      <td>编译原理</td>
      <td></td>
      <td></td>
      <td>计算机网络</td>
      <td></td>
      <td></td>
    </tr>


    <tr align="center">
      <td>第六节课
        <br>
        14:05--14:50
      </td>
      <td>分布式计算</td>
      <td>编译原理</td>
      <td></td>
      <td></td>
      <td>计算机网络</td>
      <td></td>
      <td></td>
    </tr>

    <tr align="center">
      <td>第七节课
        <br>
        15:05--15:50
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    
    <tr align="center">
      <td>第八节课
        <br>
        15:55--16:40
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>

    
    <tr align="center">
      <td>第九节课
        <br>
        16:55--17:40
      </td>
      <td></td>
      <td>国际商务</td>
      <td>统计学</td>
      <td>管理学</td>
      <td>统计学</td>
      <td></td>
      <td></td>
    </tr>
    
    <tr align="center">
      <td>第十节课
        <br>
        17:45--18:30
      </td>
      <td></td>
      <td>国际商务</td>
      <td>统计学</td>
      <td>管理学</td>
      <td>统计学</td>
      <td></td>
      <td></td>
    </tr>
    
    <tr align="center">
      <td>晚自习
        <br>
        19:00--21:30
      </td>
      <td>高数</td>
      <td>高数</td>
      <td>概率论</td>
      <td>线代</td>
      <td>线代</td>
      <td></td>
      <td></td>
    </tr>








  </table>

</body>

</html>