首页 > 其他分享 >html 表格

html 表格

时间:2023-04-22 23:03:37浏览次数:31  
标签:星期 语文 计算机 表格 体育 html 数学

<!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>
<body>

    <!-- demo1 -->
    <h6>案例1</h6>
    <!-- 表格容器标签 -->
    <table>
        <tr>
            <!-- td对应的是列 -->
            <td>不该</td>           
            <td>喜欢你</td>
        </tr>
        <!-- tr对应的是行 -->
        <tr>
            <td>11</td>
        </tr>
        <tr>
            <td>22</td>
        </tr>
    </table>

    <!-- demo2 -->
    <h6>案例2</h6>

    <!-- 表格的属性 -->
    <!-- border 边框的粗细 -->
    <!-- width 边框的宽度 -->
    <!-- hight 边框的高度 -->
    <table border="5" width="100px" hight="100px">
        <tr>
            <!-- td对应的是列 -->
            <td>不该</td>           
            <td>喜欢你</td>
        </tr>
        <!-- tr对应的是行 -->
        <tr>
            <td>11</td>
        </tr>
        <tr>
            <td>22</td>
        </tr>
    </table>


</body>
</html>

demo

<!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>
    <style>
        h6{
            text-align: center;
        }
        table{
            text-align: center;
        }
    </style>
</head>
<body>
    <h6>课程表</h6>
    <table border="2" width="400px" hight="200px">
        <tr>
            <td>项目</td>
            <!-- 水平合并 -->
            <!-- 水平合并保留左边,删除右边 -->
            <!-- 合计 -->
            <td colspan="5">上课</td>
            
            <td colspan="2">休息</td>
            
        </tr>
        <tr>
            <td>星期</td>
            <td>星期1</td>
            <td>星期2</td>
            <td>星期3</td>
            <td>星期4</td>
            <td>星期5</td>
            <td>星期6</td>
            <td>星期日</td>
        </tr>
        <tr>
            <!-- 垂直居中 -->
            <!-- 垂直居中保留上边,删除下边 -->
            <td rowspan="4">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>计算机</td>
            <td>化学</td>
            <td>政治</td>
            <td>体育</td>
            <td rowspan="4">休息</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>计算机</td>
            <td>化学</td>
            <td>政治</td>
            <td>体育</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>计算机</td>
            <td>化学</td>
            <td>政治</td>
            <td>体育</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>计算机</td>
            <td>化学</td>
            <td>政治</td>
            <td>体育</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>语文</td>
            <td>数学</td>
            <td>计算机</td>
            <td>化学</td>
            <td>政治</td>
            <td>体育</td>
            <td rowspan="2">休息</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>计算机</td>
            <td>化学</td>
            <td>政治</td>
            <td>体育</td>
        </tr>
    </table>
</body>
</html>

1.表格的标签有哪些

2.表格的粗细,宽高

3.表格的合并单元格

标签:星期,语文,计算机,表格,体育,html,数学
From: https://blog.51cto.com/u_15580157/6215700

相关文章

  • layui学习3(静态表格、表单元素)
    1.静态表格表格:<tableclass="layui-table"></table>属性:lay-even实现隔行换色效果lay-skin="属性值"【line(行边框风格)、row(列边框风格)、nob(无边框风格)】lay-size="属性值"【sm(小尺寸)、lg(大尺寸)】表格-页面元素-Layui(ilayuis.com)<!DOCTYPEht......
  • 表格化构建系统-第一阶段成果
    表格化构建系统-第一阶段成果展示连接上了数据库,实现了主要页面和功能能够实现主要的表格化构建的功能,上传完成后,处理完毕会弹出下载链接做出了加载页面,同时前端比较完善,登录注册也能够实现,能够保存用户登录信息  ......
  • HTML+CSS居然可以做时钟,太秀了吧
    谁懂啊家人们,html+css居然可以做一个时钟出来,这么厉害的吗咱这新手是啥也不懂啊,就会复制粘贴,反正是可以正常显示的话不多说直接上代码,直接复制即可正常运行<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compa......
  • Introduction to WebGL 3D with HTML5 and Babylon.js
    Explore3Dbasics,andtakealookat3Dwithouthardware(creatingasoftwareengine).[05:45]-Understanding3DBasicsviaasoftengine[09:49]-UnderstandingtheTransformationpipeline[20:26]-Itsallabouttriangles[31:42]-MovingfromCPUto......
  • Bootstrap Table表格中存放下拉框,读取数据填充到下拉框
    初学Bootstarp,个人感觉一个功能非常强大的前端框架,由于学习的路途也不是一番风顺的,难免会遇到问题,将遇到的问题整理,可以时常看看,加深记忆。最近做表格需要在表格中加入<select>标签,将数据填充到下拉框,无奈搞了好几个小时也没有成功,最后经过请教身边的大佬,得以解决。代码如下:htt......
  • 表格里,如何实现input失去焦点事件
     一诺佳人创建于 2020-09-0213:33 大佬,请问表格的input框内怎么实现动态失去焦点事件,例如填写数量和单价,金额自动生成, 我在formatter里写了,如下,但是不是自动触发,是点击新增按钮,才会自动计算一次。     参考代码表格字......
  • HTML5: 利用SVG动画动态绘制文字轮廓边框线条
    DEMO:点击这里看效果 简要教程这是一款很酷的html5svg线条动态绘制文字轮廓边框动画特效。SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单、精美的图标和文字。关于使用SVG制作图标方面的知识,请参考阅读ESSENTIALICONS。制作流程先......
  • python调用imgkit将html转图片pdf问题实例wkhtmltox
    wkhtmltox的下载地址:https://wkhtmltopdf.org/downloads.html或者:https://github.com/wkhtmltopdf/wkhtmltopdf0.12.6版本按网络上的教程会出现一个错误:IOError:wkhtmltopdfexitedwithnon-zerocode1.error:[blank]解决方法参见:https://stackoverflow.com/questions/......
  • R中6种读入表格数据的方式哪个最快?结果出人意料!
    R怎么读入表格数据最快?R中有6个常用数据读取函数:utils::read.csv:默认使用的读入方式(read.table)readr::read_csv:readr包中的读入函数(RStudio中默认也包含了这一方式)data.table::fread:来自data.table包base::load:加载rda文件base::readRDS:读取二进制数据feather::rea......
  • jmeter生成html测试报告(二)
    利用jmeter自带工具:GenerateHTMLreport生成html测试报告:1、打开jmeter测试工具,选择Tools,选择GenerateHTMLreport; 2、完善生成生成报告所需要的内容: 3、点击生成即可 4、根据导出报告的目录即可找到html测试报告了  ......