table标签与样式的例子

最新推荐文章于 2024-04-19 20:39:07 发布
最新推荐文章于 2024-04-19 20:39:07 发布
阅读量515 收藏
点赞数
分类专栏： css 文章标签： table class border xhtml html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sagahu0359/article/details/7087493
版权

table标签与样式的例子

作者：sagahu@163.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>table标签与样式的例子</title>
   
    <style type="text/css">
        table
        {
         border: solid 1px black;
         border-collapse: collapse;
        }
        td,th
        {
         border: solid 1px blue;
         width: 100px;
         text-indent: 8px;        
        }
        .col1
        {
         text-align: center;
        }
    </style>
</head>
<body>

<table style="">

<caption><b>这里是caption</b></caption>

<thead>
<tr><th style="width: 60px;" class="col1">No</th><th style="width: 100px;">Title</th><th style="width: 200px;">Description</th></tr>
</thead>

<tbody>
<tr><td class="col1">1</td><td>张三</td><td></td></tr>
<tr><td class="col1">2</td><td>李四</td><td></td></tr>
<tr><td class="col1">3</td><td>王五</td><td></td></tr>
<tr><td class="col1">4</td><td>牛七</td><td></td></tr>
<tr><td class="col1">5</td><td>猪八</td><td></td></tr>
</tbody>

<tfoot>
<tr><th>合计：</th><th colspan="2">5人</th></tr>
</tfoot>

</table>

</body>
</html>

龙城银狐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap table 服务器端分页例子分享
09-03
在这个例子中，我们将深入理解如何实现 Bootstrap Table 的服务器端分页。 1. **前端配置**： - 首先，需要在页面中引入 Bootstrap Table 所需的 JavaScript 文件。这些文件可以从官方网站下载，然后在 HTML 中...
Table 标签详解
热门推荐
_
02-11 3万+
<table>在HTML 中定义了表格布局。说到 table 标签，我们可以想到的大致有以下几个元素：<tr>、<th>、<td>、<thead>、<tbody>、<tfoot>接下来，我们看看每个元素有什么用，使用后会有怎样的效果。 table 的基本使用 1.<table> <!DOCTYPE html> <html><head><meta charset=".
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
最新发布
u013179804的博客
04-19 6008
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
CSS table标签
guizi0809的博客
09-07 4211
一、标签定义 一个完整的table包含thead、tbody、tfoot这些语义化标签，方便对表格中的行进行分组，这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。 其中 th(table head) 一般用于定义表头，也可用于定义单元格，文本会默认加粗 tr(table row) 定义表格中的行 td(table data) 定义表格中单元格 <table> <!-- 表头部--> <thead>
HTML系列之表格标签
老__L的博客
10-25 6084
本文主要介绍caption、col、colgroup、table、tbody、td、tfoot、th、thead、tr标签。 table 开始标签和结束标签不能省略；表格中由行中的单元格组成；表格中没有列元素，列的个数取决于行的单元格个数；caption 开始标签和结束标签都不能省略；当 table 标签是 caption 的父元素，caption 是 figure 元素的唯一后代的时候，
＜table＞标签的样式问题
xjh01的博客
10-10 367
在项目开发中，关于<table>标签的样式设置、布局一直让我很头痛，最好用的是cellpadding、cellspacing两个属性，但api里又说 HTML5 不支持<table> cellpadding 属性。请使用 CSS 代替。 今天无意间找到了一个说法，完全解决了这个问题 cellspacing 和 cellpadding 是html标签的直接属性，不是css的样式属性。 css的样式属性是 table{ border-spacing: 2px; /* 对应cells
用标准dl,dt,dd标签抛弃table列表
12-09
然而，对于数据展示，尤其是表格形式的数据，人们常常会纠结于是否应该使用传统的`<table>`标签。本文将探讨如何利用`<dl>`, `<dt>`, `<dd>`标签替代`<table>`来创建数据列表，以实现更简洁、更语义化的代码。 首先...
layui 实现table翻页滚动条位置保持不变的例子
10-16
这个例子展示了如何利用JavaScript与layui table的API配合，解决实际开发中遇到的问题，提升了用户体验。在开发过程中，面对类似的问题，关键在于理解DOM操作和事件处理，以及如何利用框架提供的API来定制化功能。...
基于JS实现table导出Excel并保留样式
11-20
在这个例子中，我们创建了一个表格`<table>`，并在`<style>`标签内定义了表格单元格`td`的基本样式。当用户点击下载链接时，JavaScript将执行导出操作。 为了将HTML表格转换为Excel文件，我们需要使用JavaScript的`...
重要知识displaytable标签.pdf
10-06
以下是一个更复杂的例子，展示了如何自定义列的显示内容、排序、样式以及操作按钮： ```jsp <display:table class="news" id="disTable" name="pstList" pagesize="20" partialList="true" size="totalNum" request...
table标签
qq_50931436的博客
05-30 7656
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 ...
html5: table表格与页面布局整理
weixin_30578677的博客
01-12 1137
传统表格布局之table标签排版总结： 默认样式： <style> table { max-width: 800px; border-spacing: 2px; border-collapse: initial; display: table; } table td { padding: 10px; ...
html —— table 标签 与 display:table 样式
永远的北极光
04-01 1万+
目录：一、table 相关标签介绍及使用二、div 布局设置display：table一、table 相关标签介绍及使用相关标签按包含关系从大到小排序：table ——&gt; col | colgroup | thead | tbody | tfoot；thead | tbody | tfoot ——&gt; tr；tr ——&gt; th | td；说明：table：重要属性有border（单...
HTML table标签，css样式，caption标签，标题及摘要的语法解析
xinianbuxiu的博客
12-06 9274
一、table标签，网页上的表格 有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表： 想在网页上展示上述表格效果可以使用以下代码： 创建表格的五个元素： table、tbody、tr、th、td 1、…：整个表格以标记开始、标记结束。 2、…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载
table标签样式
weixin_30372371的博客
12-12 94
table标签例子. 原文链接:http://blog.sina.com.cn/s/blog_655e3f720100lipq.html 效果图: 代码: View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht...
CSS实例(一)：漂亮的表格样式
无名指的约定
08-19 6578
WEB2.0提倡使用div布局，但不是要完全放弃使用表格，表格在数据展现方面还是不错的选择。 现在使用介绍使用CSS样式表来控制、美化表格的方法。 Html代码   >  html xmlns="http://www.w3.org/1999/xhtml">  head>  meta http-equiv="Content-Type" content="text
CSS案例之表格案例
宅羽的博客
11-25 529
◆ 给div加上如下样式： margin:0,auto; text-align:center 如果还是没有居中，给表格加一个样式： margin:auto;
HTML之table样式集锦
观山是山
06-07 8242
处理意见：                                                             审批记录                        width: 列的宽度   align: 单元格内容水平排列方式：right left center  valign: 单元格内容垂直排列方式: top bottom middle bas
如何使用HTML中的table标签
05-24
table标签用于在HTML文档中创建表格，它是一个容器元素，可以包含多个行（tr）和列（td）。 下面是一个简单的例子： ```html <table> 第一行第一列 第一行第二列 第二行第一列 第二行第二列 </table> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值