HTML/CSS class6 table布局

最新推荐文章于 2023-10-09 09:49:31 发布
最新推荐文章于 2023-10-09 09:49:31 发布
阅读量471 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jellywfguo/article/details/81623490
版权

1 


/*
 *Copyright  (c)  
 *All rights reserved.
 *文件名称: class7_table布局.html
 *作者: 郭栋
 *完成日期:2018年 8月13日
 *版本号:v1.0
 *问题描述:table布局，前面练习操作，后面表格绘制练习及页面布局练习
 *输入描述:
 *程序输出
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class7</title>
</head>
<body>
<!--<table border="1" style="text-align: center" align="center" width="500" cellspacing="0" cellpadding="0">-->
    <!--<thead></thead>-->
    <!--<tbody></tbody>-->
    <!--<tfoot></tfoot>-->

    <!--<caption>阶段课程表</caption>-->
    <!--<tr>-->
        <!--<th colspan="5">第一阶段</th>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>星期一</td>-->
        <!--<td>星期二</td>-->
        <!--<td>星期三</td>-->
        <!--<td>星期四</td>-->
        <!--<td rowspan="2">星期五</td>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>上课</td>-->
        <!--<td>不上课</td>-->
        <!--<td>不上课</td>-->
        <!--<td>上课</td>-->

    <!--</tr>-->
    <!--<tr>-->
        <!--<th colspan="5">第二阶段</th>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>星期一</td>-->
        <!--<td>星期二</td>-->
        <!--<td>星期三</td>-->
        <!--<td>星期四</td>-->
        <!--<td rowspan="2">星期五</td>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>上课</td>-->
        <!--<td>不上课</td>-->
        <!--<td>不上课</td>-->
        <!--<td>上课</td>-->

    <!--</tr>-->
    <!--<tr>-->
        <!--<th colspan="5">第三阶段</th>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>星期一</td>-->
        <!--<td>星期二</td>-->
        <!--<td>星期三</td>-->
        <!--<td>星期四</td>-->
        <!--<td rowspan="2">星期五</td>-->
    <!--</tr>-->
    <!--<tr>-->
        <!--<td>上课</td>-->
        <!--<td>不上课</td>-->
        <!--<td>不上课</td>-->
        <!--<td>上课</td>-->

    <!--</tr>-->
<!--</table>-->

<table border="1" cellpadding="0" cellspacing="0" align="center" style="text-align: center">
    <thead>
        <th colspan="8" >
            <p style="height:100px">湖南省义务教育合格学校建设条件建设项目汇总表</p>

        </th>
</thead>
    <tbody>
    <tr>
        <td rowspan="3">学校名称</td>
        <td colspan="6">项目类别</td>
        <td rowspan="3">经费小计<br/>（万元）</td>
    </tr>
    <tr >
        <td colspan="2" >建筑类</td>
        <td colspan="2">设备类</td>
        <td colspan="2">其他类</td>

    </tr>
    <tr>
        <td>数量<br/>（平方米）</td>
        <td>经费<br/>（万元）</td>
        <td>数量<br/>（件）</td>
        <td>经费<br/>（万元）</td>
        <td>数量</td>
        <td>经费<br/>（万元）</td>
    </tr>
    <tr>
        <td>学校1</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>学校2</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
    <td>学校3</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
</tr>
    <tr>
    <td>学校4</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
</tr>
    <tr>
    <td>学校5</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
</tr>
    <tr>
        <td>学校6</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>学校7</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>学校8</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td><b>合计</b></td>
        <td>0.0</td>
        <td>0.0</td>
        <td>0.0</td>
        <td>0.0</td>
        <td>0.0</td>
        <td>0.0</td>
        <td>0.0</td>
    </tr>
</tbody>
    <tfoot>
    <tr >
       <td align="left" colspan="8"> 2018.8.12 20:12</td>
    </tr>
    </tfoot>


</table>
</body>
</html>

页面布局 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        ul{
            display: inline}
        ul li{
            list-style: none;
            display: inline;
        }
    </style>
</head>
<body>
<table border="3" bordercolor="red">
    <tr>
        <td colspan="3"><img src="img/dragon.jpg" height="300px" width="100%"></td>
    </tr>
    <tr>
        <td><h2>我的站点<sup><img src="img/i_laugh.png" height="15px"> </sup></h2></td>
        <td colspan="2" align="center">
            <u>请在这选择你需要的频道：</u>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">教程</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">教程</a></li>
                <li><a href="#">教程</a></li>
                <li><a href="#">友情链接<sub>（百度）</sub></a></li>

            </ul>
        </td>
    </tr>
    <tr>
        <td>
            <ol>
                <h4>所有商品</h4>
                <li><a href="#">牛奶</a></li>
                <li><a href="#">咖啡</a></li>
                <li><a href="#">啤酒</a></li>
                <li><del>茶（已经下架）</del></li>
            </ol>
        </td>
        <td>
            <dl>
                <h4>各大知识体系列表</h4>
                <dt>前端语言</dt>
                <dd>html超文本标记语言</dd>
                <dd>css样式表</dd>
                <dd><font color="#dc143c" >JavaScript</font></dd>
                <dt>服务器端语言</dt>
                <dd>java</dd>
                <dd>php</dd>
                <dd> <font color="#dc143c">node.js</font> </dd>
            </dl>
        </td>
        <td>
            <p><i>请扫描以下<em>"学堂"</em>二维码</i></p>
            <img src="img/eg1.gif">
        </td>
    </tr>
    <tr>
        <td colspan="3" align="center">
            <address>版权所有&copy; </address>
        </td>
    </tr>

</table>
</body>
</html>

2结果

表格
标题

 

郭_栋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
宇瞻发布microSDHC class6 4GB/8GB手机内存卡
11-22
随着新一代手机标榜体积小巧、容易携带以及更多领先技术功能的同时，原本的microSD内存卡仅至2GB容量已无法满足影片、音乐及多媒体储存之需求，为此宇瞻(Apacer)新推出microSDHC class6 4GB/8GB容量内存卡，以符合高容量储存的潮流趋势。  　　Apacer预期microSDHC内存卡将于2008年成为主流，该种内存卡提升了最小体积内存卡之储存容量和速度，将满足目前使用者对于手机和数码产品的通讯和多媒体效能表现之需求，而扩充的内存卡储存容量将让这些手机和数码产品充分发挥功能，让使用者享受丰富的数码乐趣。  　　Apacer的手机内存卡系列产品，包括容量从1GB至8GB(
Css之table布局:
SunPeng的博客
11-22 5414
Css之table布局:
HTML入门-------table布局
Funny54的博客
05-24 3525
一.table表格 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 表格是以行和列的形势显示信息，常用于显示网格结构的数据。 二.创建表格 ...
CSS 之 table 表格布局
weixin_45092437的博客
10-09 5729
除了使用HTML的table元素外，我们还可以通过display: table/inline-table;设置元素内部的布局类型为表格布局。并结合table-cell、table-row等相关CSS属性值可以实现HTML中table系列元素的效果，具有表头、表尾、行、单元格等概念，让元素以表格的形式进行布局。
css：九宫格布局的五种方法（grid布局、flex布局、table布局、float浮动定位、inline-block+letter-spacing属性）
YangLu888
04-20 5962
css实现九宫格的五种方法：grid网格布局、flex布局、inline-block+letter-spacing属性、float浮动定位、table表格布局
css属性table
飘过的春风
11-05 2649
table的属性： HTML  cellpadding 属性 把表格单元边沿与单元内容之间的间距设置为 10 像素： cellpadding 属性规定单元边沿与单元内容之间的空间，以像素计。 注意：请勿将该属性与 cellspacing 属性相混淆，cellspacing 属性规定的是单元之间的空间。 -------------------------------
HTML&CSS Table元素详细解说
weixin_30381793的博客
03-09 180
1.预热 css样式多如牛毛，我不可能一个一个去讲，那样好像背字典一样，我相信你们也不喜欢这样的方式。所以，我会在实战中慢慢和你讲解，然后，你记住一些重要的css属性就可以了。关键是，你要学会去查资料，最好的查资料方法，不是那种去W3C School上，一页一页看过去，那样的话不知道要看到什么时候，而是应该去看一些网页的源码，看看他们的网页是怎么做起来的，用了哪些css属性？这里面，肯定...
css巧用表格布局制作table
行路-前端的博客
11-12 813
利用css表格布局制作样式
通信与网络中的宇瞻推出microSDHC class6 4GB/8GB手机内存卡
11-25
随着新一代手机标榜体积小巧、容易携带以及更多领先技术功能的同时，原本的microSD内存卡仅至2GB容量已无法满足影片、音乐及多媒体储存之需求，为此宇瞻(Apacer)新推出microSDHC class6 4GB/8GB容量内存卡，以符合高...
6.Hadoop入门进阶课程_第6周_MapReduce应用案例.pdf
04-03
6.Hadoop入门进阶课程_第6周_MapReduce应用案例.pdf 6.Hadoop入门进阶课程_第6周_MapReduce应用案例.pdf
视频中工程代码 class6_BCD_Counter
05-31
视频中工程代码 class6_BCD_Counter视频中工程代码 class6_BCD_Counter视频中工程代码 class6_BCD_Counter视频中工程代码 class6_BCD_Counter视频中工程代码 class6_BCD_Counter视频中工程代码 class6_BCD_Counter...
Class6.zip-test
05-14
Class6.zip-test
css-常用布局方法02-table布局
东东爱编码博客
03-04 1692
文章目录一、css-常用布局方法1. table表格布局 一、css-常用布局方法 1. table表格布局 // 使用表格标签进行布局 <table> <tr> <td class="left">左</td> <td class="right">右</td> </tr> </table> .left { background: blue; } .right { backgrou
html+css学习----表格table
kylvia的专栏
02-17 767
一、表格基本结构   ...-----定义表格 ...----定义表行 ...---定义表列（单元格） ...----文字标题栏（加粗）会默认自动居中   二、表格标题：   三、表格结构化 作用：代码乱序时结构得到保持 (1)结构化格式（加了无效果，浏览器看） ...----表示表头区 ...----表体区 ....------表尾区
html css样式之table
桔子大大
07-02 681
table 样式美化1. 单像素边框CSS表格这是一个很常用的表格样式。 源代码： 1 &lt;!-- CSS goes in the document HEAD or added to your external stylesheet --&gt; 2 &lt;style type="text/css"&gt; 3 table.gridtable { 4 font-family: ...
html table class属性,HTML Table Class
weixin_39604516的博客
06-07 1968
HTML Table ClassTable类提供的功能使您能够从数组或数据库结果集中自动生成HTML表格。使用表类初始化类例子改变你的表的外观类参考使用表类初始化类像CodeIgniter中的大多数其他类一样，Table类在您的控制器中使用以下$this->load->library()方法进行初始化：$this->load->library('table');加载后，表格...
CSS实现9宫格布局的4种方法：flex、float、grid、table布局
背心的博客
02-03 2012
CSS实现9宫格布局的4种方法：flex、float、grid、table布局
CSS布局系列二：table布局
betty_grant的博客
03-05 689
Table 布局 概念 元素 display选项 说明 table table/inline-table caption table-caption 表格标题 thead table-header-group tbody table-row-group tfoot table-footer-group tr table-row 表格行 th/td table-cell ...
电力系统调度过程连续潮流matlab代码.zip
最新发布
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
Traceback (most recent call last): File "/Users/f7693311/Desktop/work/summaryclassifier_self/ai/class6/p37_tushare.py", line 6, in <module> pro = ts.pro_api() File "/Users/f7693311/anaconda3/envs/pytorch/lib/python3.8/site-packages/tushare/pro/data_pro.py", line 41, in pro_api raise Exception('api init error.') Exception: api init error.
06-01
这个错误可能是因为您的tushare API初始化失败。请确保您已经成功安装了tushare，并且已经正确配置了您的API token。 您可以尝试检查您的API token是否正确，并且是否已经在代码中正确设置了。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郭_栋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值