html table样式-凯发k8官方网
凯发k8官方网
收集整理的这篇文章主要介绍了
html table样式_css表格样式
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
表格的样式一般可以在html中直接定义，但是结构和样式需要分开声明，这可以方便后期的维护和修改。css中的表格样式有caption-side(表格标题位置)、border-collapse(表格边框合并)、border-spacing(表格边框间距)。
caption-side
caption-side属性取值只有2个，如下表
| 属性值 | 说明 |
| top | 标题在顶部(默认) |
| bottom | 标题在底部 |
举一个标题在底部的示例
doctype html>
表格标题位置title></p><p> <style type="text/css"></p><p> table{</p><p> caption-side: bottom;</p><p> }</p><p> table,td{</p><p> border: 1px solid silver;</p><p> }</p><p> style></p><p> head></p><p> <body></p><p> <table></p><p> <caption>四大天王caption></p><p> <tr></p><p> <td>刘德华td></p><p> <td>60岁td></p><p> tr></p><p> <tr></p><p> <td>张学友td></p><p> <td>60岁td></p><p> tr></p><p> <tr></p><p> <td>郭富城td></p><p> <td>56岁td></p><p> tr></p><p> <tr></p><p> <td>黎明td></p><p> <td>55岁td></p><p> tr></p><p> table></p><p> body></p><p>html></p><p></p><p>border-collapse</p><p> 在表格加入边框后单元格之间有一定的空隙 ，为了美观，我们可以把单元格之间的空隙去除。</p><p> border-collapse属性取值有2个，如下表</p><table><tbody><tr><td align="center"><strong>属性值</strong></td><td align="center"><strong>说明</strong></td></tr><tr><td align="left">separate</td><td align="left">边框分开，有空隙</td></tr><tr><td align="left">collapse</td><td align="left">边框合并，无空隙</td></tr></tbody></table><p> 示例： </p><p>doctype html></p><p><html></p><p> <head></p><p> <meta charset="utf-8" /></p><p> <title>表格边框合并title></p><p> <style type="text/css"></p><p> table{</p><p> border-collapse: collapse;</p><p> }</p><p> table,td{</p><p> border: 1px solid silver;</p><p> }</p><p> style></p><p> head></p><p> <body></p><p> <table></p><p> <caption>四大天王caption></p><p> <tr></p><p> <td>刘德华td></p><p> <td>60岁td></p><p> tr></p><p> <tr></p><p> <td>张学友td></p><p> <td>60岁td></p><p> tr></p><p> <tr></p><p> <td>郭富城td></p><p> <td>56岁td></p><p> tr></p><p> <tr></p><p> <td>黎明td></p><p> <td>55岁td></p><p> tr></p><p> table></p><p> body></p><p>html></p><p> </p><p>border-spacing</p><p> 表格边框的间距，直接用像素值。 </p><p>doctype html></p><p><html></p><p> <head></p><p> <meta charset="utf-8" /></p><p> <title>表格边框间距title></p><p> <style type="text/css"></p><p> table{</p><p> border-spacing: 5px;</p><p> }</p><p> table,td{</p><p> border: 1px solid silver;</p><p> }</p><p> style></p><p> head></p><p> <body></p><p> <table></p><p> <caption>四大天王caption></p><p> <tr></p><p> <td>刘德华td></p><p> <td>60岁td></p><p> tr></p><p> <tr></p><p> <td>张学友td></p><p> <td>60岁td></p><p> tr></p><p> <tr></p><p> <td>郭富城td></p><p> <td>56岁td></p><p> tr></p><p> <tr></p><p> <td>黎明td></p><p> <td>55岁td></p><p> tr></p><p> table></p><p> body></p><p>html></p><p></p><hr /><p>本节主要学习了表格样式，最后对其总结。</p><ul><li><p>表格标题位置：caption-side </p></li><li><p>表格边框合并：border-collapse</p></li><li><p>表格边框间距：border-spacing</p></li></ul>
<h2>总结</h2>
<p>
以上是<a href="/">生活随笔</a>为你收集整理的<a title="html table样式_css表格样式" href="/content/1761784.html">html table样式_css表格样式</a>的全部内容，希望文章能够帮你解决所遇到的问题。
</p>
<p>
如果觉得<a href="/">生活随笔</a>网站内容还不错，欢迎将<a href="/">生活随笔</a>推荐给好友。
</p>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script>hljs.highlightall();</script>
<script src="/fedozstyle/js/copycode.js"></script>
</div>
<div class="keywords">
<ul>
<li><a target="_blank" title="表格" href="/tag/1154">表格</a></li>
<li><a target="_blank" title="样式" href="/tag/1201">样式</a></li>
<li><a target="_blank" title="table" href="/tag/2589">table</a></li>
<li><a target="_blank" title="_css" href="/tag/137139">_css</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="share" id="down">
<img src="/fedozstyle/images/wx.png" />
<div class="share-text">
<p>欢迎分享！</p>
<p>转载请说明来源于"生活随笔"，并保留原作者的名字。</p>
<p>本文地址：<a title="html table样式_css表格样式" href="/content/1761784.html">html table样式_css表格样式</a></p>
</div>
</div>
<div class="clear"></div>
<div class="info-pre-next">
<ul>
<li>
上一篇：<a title="jeecg boot一对多新增的附表不会主键是一个string_测试开发专题:spring-boot如何使用jpa进行双向一对多配置..." href="/content/1761783.html">
jeecg boot一对多新增的附表不会
</a>
</li>
<li>
下一篇：<a title="天线巴伦制作和原理_10米段的春天 | 用自制环型天线＋改装sdr接收器27mhz采访实录..." href="/content/1761785.html">
天线巴伦制作和原理_10米段的春天 |
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="ad ad-big">
<div style="border: #eb3d41 1px dashed; ">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3420692030265175"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-3420692030265175"
data-ad-slot="5682038375"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
</div>
<aside class="side-section right-box">
<div class="whitebg paihang">
<h2 class="side-title">最新发布</h2>
<ul>
<li><i></i><a title="css基础汇总" target="_blank" href="/content/1820606.html">css基础汇总</a></li>
<li><i></i><a title="在html中标记中可以嵌套标记,如何在less css嵌套类中指定html标记？" target="_blank" href="/content/1817811.html">在html中标记中可以嵌套标记,如何在less css嵌套类中指定html标记？</a></li>
<li><i></i><a title="css 设置其它标签,有没有办法将css样式设置为特定输入类型的标签？" target="_blank" href="/content/1817343.html">css 设置其它标签,有没有办法将css样式设置为特定输入类型的标签？</a></li>
<li><i></i><a title="js锚点定位_overflow属性详解，利用css实现锚点定位" target="_blank" href="/content/1815360.html">js锚点定位_overflow属性详解，利用css实现锚点定位</a></li>
<li><i></i><a title="css清除浮动的几种方法_css--清除浮动" target="_blank" href="/content/1815270.html">css清除浮动的几种方法_css--清除浮动</a></li>
</ul>
</div>
<div class="ad ad-small">
<div style="border:#1487f4 1px dashed; ">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3420692030265175"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3420692030265175"
data-ad-slot="3139024105"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="whitebg suiji">
<h2 class="side-title">热门推荐</h2>
<ul>
<li><a title="postcss 以及 cssnext语法" target="_blank" href="/content/716790.html">postcss 以及 cssnext语法</a></li>
<li><a title="零基础css入门教程(7)——css外联写法" target="_blank" href="/content/1172189.html">零基础css入门教程(7)——css外联写法</a></li>
<li><a title="css选择器" target="_blank" href="/content/131309.html">css选择器</a></li>
<li><a title="3 css 高级语法" target="_blank" href="/content/1621285.html">3 css 高级语法</a></li>
<li><a title="实现css在线美化(格式化)、压缩、加密、解密、混淆工具-toolfk程序员工具网" target="_blank" href="/content/912359.html">实现css在线美化(格式化)、压缩、加密、解密、混淆工具-toolfk程序员工具网</a></li>
</ul>
</div>
<div class="ad ad-small">
<div style="border:#1487f4 1px dashed; ">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3420692030265175"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-3420692030265175"
data-ad-slot="1599323135"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="whitebg cloud">
<h2 class="side-title">标签云</h2>
<ul>
<li><a target="_blank" title="连接数据库" href="/tag/3027">连接数据库</a></li>
<li><a target="_blank" title="单元格" href="/tag/3020">单元格</a></li>
<li><a target="_blank" title="蓝牙耳机" href="/tag/3010">蓝牙耳机</a></li>
<li><a target="_blank" title="程序语言" href="/tag/2172">程序语言</a></li>
<li><a target="_blank" title="微信游戏" href="/tag/2169">微信游戏</a></li>
<li><a target="_blank" title="软件安装" href="/tag/2158">软件安装</a></li>
<li><a target="_blank" title="双系统" href="/tag/2140">双系统</a></li>
<li><a target="_blank" title="游戏开发者" href="/tag/2136">游戏开发者</a></li>
<li><a target="_blank" title="设计理念" href="/tag/2100">设计理念</a></li>
<li><a target="_blank" title="计算机资源" href="/tag/2095">计算机资源</a></li>
<li><a target="_blank" title="婚纱照" href="/tag/17466">婚纱照</a></li>
<li><a target="_blank" title="车库" href="/tag/48996">车库</a></li>
<li><a target="_blank" title="音郭京飞" href="/tag/43679">音郭京飞</a></li>
<li><a target="_blank" title="科学家" href="/tag/5338">科学家</a></li>
<li><a target="_blank" title="光辉" href="/tag/25145">光辉</a></li>
<li><a target="_blank" title="作用域" href="/tag/78">作用域</a></li>
<li><a target="_blank" title="西毒" href="/tag/20295">西毒</a></li>
<li><a target="_blank" title="中国历代" href="/tag/20448">中国历代</a></li>
<li><a target="_blank" title="经贸" href="/tag/35651">经贸</a></li>
<li><a target="_blank" title="雪场" href="/tag/26619">雪场</a></li>
</ul>
</div>
</aside></article>
<div class="clear blank"></div>
<footer>
<div class="footer box">
<div class="endnav">
<p>
凯发k8官方网 copyright © 2002-2030 <a href="/">生活随笔</a> 凯发k8官方网的版权所有
<a href="http://www.beian.gov.cn/portal/registersysteminfo?recordcode=41010202003143" target="_blank" rel="nofollow">豫公网安备 41010202003143号</a>
<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">豫icp备2022013113号-1</a>
<a target="_blank" href="/sitemap/index.xml">sitemap</a>
</p>
</div>
</div>
</footer>
<a href="#" title="返回顶部" class="icon-top"></a>
<script charset="utf-8" id="la_collect" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>la.init({id: "jejnhuftwnsvvact",ck: "jejnhuftwnsvvact"})</script> <script src="/fedozstyle/js/hc-sticky.js"></script>
<script src="/fedozstyle/js/aside-sticky.js"></script>
</body>
</html>