table表格的制作

最新推荐文章于 2022-08-25 22:37:46 发布
最新推荐文章于 2022-08-25 22:37:46 发布
阅读量1.4k 收藏
点赞数
分类专栏： HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/myjlvzlp/article/details/8267350
版权
HTML 同时被 2 个专栏收录
14 篇文章 0 订阅
订阅专栏
CSS
13 篇文章 0 订阅
订阅专栏

简单的表格效果

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>简单的表格效果</title>
        <style>
            table{
                background-color: #fff;
                border: none;
                color: #565;
                font: 12px arial;
                text-align: left;
            }
            table caption{
                font-size: 24px;
                border-bottom: 2px solid #B3DE94;
                border-top: 2px solid #B3DE94;
            }
            table, td, th{
                margin: 0;
                padding: 0;
                vertical-align: middle;
            }
            tbody td, tbody th{
                background: #DFC;
                border-bottom: 2px solid #B3DE94;
                border-top: 3px solid #FFFFFF;
                padding: 9px;
            }
            tfoot td, tfoot th{
                font-weight: bold;
                padding: 4px 8px 6px 9px;
                text-align: center;
            }
            thead th{
                font-size: 14px;
                font-weight: bold;
                line-height: 19px;
                padding: 0 8px 2px;
                text-align: center;
            }
            tbody tr.even th, tbody tr.even td{
                background-color: #CEA;
                border-bottom: 2px solid #67BD2A;
            }
            col.price{
                text-align: right;
            }
        </style>
    </head>
    <body>
        <table summary="book list">
            <caption>Book List</caption>
            <col></col><col></col><col></col><col class="price" align="right"></col><col></col>
            <thead>
                <tr>
                    <th >Title</th>
                    <th >ID</th>
                    <th >Country</th>
                    <th >Price</th>
                    <th >Download</th>
                </tr>
            </thead>	
            <tbody>
                <tr >
                    <th class="even">Tom</th>
                    <td>1213456</td>
                    <td>Germany</td>
                    <td>$3.12</td>
                    <td>Download</td>
                </tr>
                <tr class="odd">
                    <th >Chance</th>
                    <td>1213457</td>
                    <td>Germany</td>
                    <td>$123.34</td>
                    <td>Download</td>
                </tr>
                <tr class="even">
                    <th >John</th>
                    <td>1213458</td>
                    <td>Germany</td>
                    <td>$34.37</td>
                    <td>Download</td>
                </tr>
                <tr class="odd">
                    <th >oKathleen</th>
                    <td>1213459</td>
                    <td>Germany</td>
                    <td>$23.67</td>
                    <td>Download</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th >Total</th>
                    <td colspan="4">4 books</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

IE6下变换table颜色的TD

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>IE6下变换table颜色的TD</title>
        <style>
            table{
                color: #565;
                font: 12px arial;
            }
            td{
                background-color: #DFC;
                border-bottom: 2px solid #BED394;
                border-top: 3px solid #fff;
                padding: 9px;
            }
            tr:hover, tr.hover{
                background-color: #595;
                color: #fff;
            }

        </style>
    </head>
    <body>
        <table summary="book list">
            <caption>Book List</caption>
            <tr >
                <td >Title</td>
                <td>ID</td>
                <td>Contry</td>
                <td>Price</td>
                <td>Download</td>
            </tr>

            <tr >
                <td >Tom</td>
                <td>1213456</td>
                <td>Germany</td>
                <td>$3.12</td>
                <td>Download</td>
            </tr>
            <tr>
                <td >Chance</td>
                <td>1213457</td>
                <td>Germany</td>
                <td>$123.34</td>
                <td>Download</td>
            </tr>
            <tr >
                <td >John</td>
                <td>1213458</td>
                <td>Germany</td>
                <td>$34.37</td>
                <td>Download</td>
            </tr>
            <tr>
                <td>oKathleen</td>
                <td>1213459</td>
                <td>Germany</td>
                <td>$23.67</td>
                <td>Download</td>
            </tr>
        </table>
        <script language="javascript">
            var rows = document.getElementsByTagName('tr');
            for (var i=0;i<rows.length;i++){
                rows[i].onmouseover = function(){		//鼠标指针在行上面的时候
                    this.className = 'hover';
                }
                rows[i].onmouseout = function(){		//鼠标指针离开时
                    this.className = '';
                }
            }
        </script>
    </body>
</html>

实现表格变换该行和该列的第一个单元格的颜色

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>实现表格变换该行和该列的第一个单元格的颜色</title>
        <style>
            table{
                color: #565;
                font: 12px arial;
            }
            td{
                background-color: #DFC;
                border-bottom: 2px solid #BED394;
                border-top: 3px solid #fff;
                padding: 9px;
            }
            td.hover{
                background-color: #595;
                color: #fff;
            }

        </style>
    </head>
    <body>
        <table summary="book list">
            <caption>Book List</caption>
            <tr >
                <td >Title</td>
                <td>ID</td>
                <td>Contry</td>
                <td>Price</td>
                <td>Download</td>
            </tr>

            <tr >
                <td >Tom</td>
                <td>1213456</td>
                <td>Germany</td>
                <td>$3.12</td>
                <td>Download</td>
            </tr>
            <tr>
                <td >Chance</td>
                <td>1213457</td>
                <td>Germany</td>
                <td>$123.34</td>
                <td>Download</td>
            </tr>
            <tr >
                <td >John</td>
                <td>1213458</td>
                <td>Germany</td>
                <td>$34.37</td>
                <td>Download</td>
            </tr>
            <tr>
                <td>oKathleen</td>
                <td>1213459</td>
                <td>Germany</td>
                <td>$23.67</td>
                <td>Download</td>
            </tr>
        </table>
        <script language="javascript">
            var cells = document.getElementsByTagName('td');
            for (var i=0;i<cells.length;i++){
                cells[i].onmouseover = function(){		//鼠标指针在行上面的时候
                    this.className = 'hover';
                    for(var j = 0;j < cells.length;j++){
                        if(cells[j] == this){
                            //该列的第一个单元格编号
                            cells[j % 5].className = 'hover';
                            //该行的第一个单元格编号
                            cells[j - j % 5].className = 'hover';
                        }
                    }
                }
                cells[i].onmouseout = function(){		//鼠标指针离开时
                    this.className = '';
                    for(var j = 0;j < cells.length;j++){
                        if(cells[j] == this){
                            cells[j % 5].className = '';
                            cells[j - j % 5].className = '';
                        }
                    }
                }
            }
        </script>
    </body>
</html>




天使小宝
关注
专栏目录
<table>标签，制作表格
燕十三的博客
02-22 3666
有时需要在网页中以表的形式展示一些数据，比如下表： 在html中代码如下：<!DOCTYPE html> <html> <head> <title>table</title> </head> <body> <table> <tr> <th>产品名称</th> <th>品牌</th> <th>库存
table表格基础知识及简单运用
热门推荐
weixin_43183219的博客
12-16 1万+
了解table的基础知识，制作简单的table表格
自制Table表格
臧小川的博客
05-24 745
效果图 JS import { useState, } from 'react'; import styles from './style.less' const data = [ { name: '胡乐乐', key: 1, age: 19, value: '你的努力真让人可笑', operating: '哈哈哈哈' }, { name: '少主', key: 2, age: 129, value: '嘿嘿嘿', operating: '哈哈哈哈' }, { name: '郭帅'
table表格制作
weixin_30700977的博客
10-31 170
分享一个简单的表格，代码如下： <table border=3 bordercolor=blue align=center cellspacing=3 cellpadding=6> <caption>专业设置及在校生人数表</caption> <!--标题--> <!--第一行 --> ...
HTML-table 表格制作
qq_36940740的博客
04-05 4055
制作表格有四个关键字：table tr td thtable:表格标记，以&lt;table&gt;开始，&lt;/table&gt;结束。tr:行标记，用于表示一行。以&lt;tr&gt;开始，以&lt;/tr&gt;结束，插入到table格局（标签）里。td:列标记，用于表示一列。以&lt;td&gt;开始，以&lt;/td&gt;结束，插入到tr格局（标签）里，表示一行的某一列。注意：在创建...
table CSS制作好看的网页表格
12-12
幸运的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性. 1.summary 和 caption 第一元素是表格的caption,它基本上用做表格的标题.尽管这不是必须有的元素,但是尽可以使用caption总是好的.另一个元素是summary.summary属性可以应用于表格标签,用来描述表格的内容.与image的alt文本属性相似. 2.thead, tbody, tfoot thead, tbody, tfoot使网页设计人员能够将表格划分为罗辑部分.例如,可以将所有列标题放在thead元素中,这样就能够对这个特殊区域单独应用样式.如果选择使用thead或tfoot元
教大家轻松制作Bootstrap漂亮表格（table）
11-27
在这个教程中，我们将学习如何利用Bootstrap创建美观的表格（table）。 首先，我们需要了解Bootstrap的引入方式。在HTML文档的`<head>`部分，通过`<link>`标签引入Bootstrap的CSS文件。例如： ```html ``` 这是将...
一秒学会微信小程序制作table表格
10-17
本文介绍了一种快速学会在微信小程序中制作table表格的方法，以下是对该知识点的详细解析： 1. WXML结构布局：在微信小程序的WXML文件中，使用view组件模拟表格的行和单元格。首先定义一个外层容器.view，为表格...
HTML的dl、dt、dd标记制作表格对决Table制作表
12-08
在传统的`<table>`标签中，创建数据列表需要包含`<tr>`（表格行）和`<td>`（表格数据单元格）标签。例如： ```html <table> <td class="title">Name: <td class="text">Squall Li <td class="title">Age...
table表格拖动列
06-01
"table表格拖动列"的功能就是一种提升用户体验的创新设计，它允许用户根据个人需求自由调整表格中列的顺序，使得数据查看和操作更加便捷。这个功能通常涉及到JavaScript（js）和jQuery这两个强大的前端库。 首先，...
自己做的一个基于javascript和css的table表格模板，非常漂亮
11-23
自己做的一个基于javascript和css的table表格模板，非常漂亮,直接拿过来用就可以了
怎么使用HTML＜table＞标签做表格
7 芒果
09-28 1439
使用table标签制作一个简单的HTML表格 定义和用法 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。 tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。 更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素 定义和用法 标签定义 HTML 表格。 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。 tr 元素定义表格行，th 元素定
使用table元素写一个个人简历表格
qq_45411328的博客
07-05 2746
使用table元素写一个表格 模仿下面的表格用html完成相同样式 思路 将上面的表格分为四个表格分别为tb1，tb2，tb3，tb4 分为上下两部分两个div块来装表格利用浮动将tab2浮动到tb1 在将tb4浮动到tb3计科完成 tb1 分为4行两列`  用             &
table表单的制作
weixin_44540285的博客
02-22 1374
开发工具与关键技术：DW与CSS 作者：刘华叶 撰写时间：2019年2月10日 表单是我们经常用到的，里面会应用到一些知识点，下面就和大家分享一下。 首先设置属性定义表格，在定义表格标题，然后在定义表格的页眉，在定义表格的行和单元，在定义表格主体，这些表格属性就定义完了。 最后在设置CSS属性，首先给表格设置边框和上边距，下面也是一样，在设置个文字居中就可以了。 表格到这里就完成了。 ...
HTML——表格标签＜table＞与表格实现
qq_51869518的博客
06-25 5495
表格标签的实际应用和表格属性colspan和rowspan的详细解释与使用的实例和规则，以及不同形式的表格的实现；课程表、日历和的代码实现。欢迎大家能有更好的建议。
table表格
mengfanshaoxia的博客
05-25 1360
一、表格里的标签 1.table标签：用来定义表格。表格的所有内容需要写在 <table> 和 </table> 之间。 注意：默认情况下，表格是没有边框的。但是我们可以使用 <table> 标签中的 border 属性来设置表格的边框宽度，单位是像素（px）。 2.caption标签：为表格设置标题，标题用来描述表格的内容。 3.tr标签：是 table row 的简称，表示表格的行。表格中有多少个 <tr> 标签就表示有多少行数据。 4.td标签
table表格基础
wzqybz的博客
08-25 1265
组成：caption（标题）、thead（表头）、tbody（表体）、tfoot（表尾）align：设置表格对齐方式（left（默认）/right/center）写在列中(td)，需要从第一个跨行跨列的单元格写，然后删除多余的。rowspan（跨行）/colspan（跨列）cellpadding:设置内容与单元格间距。border：设置表格边框（有两层边框）cellspacing:设置像素间距。width：设置表格宽度。...
html style 纵向文本,css文本样式
weixin_42524610的博客
05-31 388
字体样式属性名 含义 举例font-family 设置字体类型 font-family:"隶书";font-size 设置字体大小 font-size:12px;font-style 设置字体风格 font-style:italic;font-weight 设置字体的粗细 font-weight:bold;font ...
如何使用iview的table表格制作竖向表格
最新发布
10-23
iView是一个流行的前端UI库，它提供了丰富的组件，包括Table表格。要使用iView的Table创建竖向显示的表格，你需要设置`direction`属性为`"vertical"`。以下是一个基本步骤： 1. 首先，确保已经安装了iView库并引入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值