CSS制作三线表

最新推荐文章于 2021-06-30 22:56:46 发布
原创 最新推荐文章于 2021-06-30 22:56:46 发布 · 1.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #class #border #xhtml #table #html

本文介绍了一种使用HTML和CSS实现美观表格的方法，通过定义不同单元格样式的类，实现了清晰的表格布局效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style>

table {
border-collapse:collapse; /* 关键属性：合并表格内外边框(其实表格边框有2px，外面1px，里面还有1px哦) */
border:solid #000000; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */
border-width:2px 0 2px 0px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */
}
.left-1{
    border:solid #000000;border-width:1px 1px 2px 0px;padding:2px;
    font-weight:bolder;
}
.right-1{
    border:solid #000000;border-width:1px 0px 2px 1px;padding:2px;
    font-weight:bolder;
}
.mid-1{
    border:solid #000000;border-width:1px 1px 2px 1px;padding:2px;
    font-weight:bolder;
}
.left{
    border:solid #000000;border-width:1px 1px 1px 0px;padding:2px;
}
.right{
    border:solid #000000;border-width:1px 0px 1px 1px;padding:2px;
}
.mid{
    border:solid #000000;border-width:1px 1px 1px 1px;padding:2px;
}
table caption {font-size:14px;font-weight:bolder;}
</style>
</head>

<body>
<table width="800" border="0">
  <tr>
    <td class="left-1">sdafdaf</td>
    <td class="mid-1">dsfafdsa</td>
    <td class="mid-1">dsfafdsa</td>
    <td class="right-1">dsfafdsa</td>
  </tr>
  <tr>
    <td class="left">dsaff</td>
    <td class="mid">dsfaaf</td>
    <td class="mid">dsfaaf</td>
    <td class="right">dsfa</td>
  </tr>
  <tr>
    <td class="left">dfsa</td>
    <td class="mid">fdsaf</td>
    <td class="mid">fdsaf</td>
    <td class="right">dfsa</td>
  </tr>
  <tr>
    <td class="left">dfsa</td>
    <td class="mid">fdsaf</td>
    <td class="mid">fdsaf</td>
    <td class="right">dfsa</td>
  </tr>
</table>
</body>
</html>
 

cuijc_04
关注
用HTML绘制三线表,R语言-临床三线表
weixin_33848693的博客
06-30 1673
自动生成临床三线表按照流行病学和相关领域的标准做法是，期刊文章的第一张表格，我们通常称为“表1”，是一份表，列出按暴露程度分层的研究人群基线特征的描述性统计数据。这个包使得使用R生成这样一个表相当简单。输出格式是html(它的优点是很容易复制到Word文档中；Chrome浏览器工作得很好)。实际上这个包还能够对表格有更多定制的功能，但这样用起来爽是需要代价的，更多的代码与CSS知识官方文档参考资料...
html表格样式模板_【Word小技巧】巧用Word表格样式 制作一个三线表模板
weixin_32568113的博客
01-20 1194
今天给大家分享如何巧用Word表格样式，制作一个三线表模板。在论文写作过程中，很多期刊和毕业论文的表格都要求是三线表，这里就以三线表为例子，制作一个三线表的表格样式。这样就会省去我们手动调整表格边框及其粗细的时间。首先在Word中插入一个表格，然后在“表格工具-表格样式”中点击新建表格样式。然后在打开的对话框中，名称一栏写“三线表”，“将格式应用于”选项选择“整个表格”，然后将表格的上框...
OFFICE--三线表的制作
weixin_34216107的博客
06-08 301
1、插入表格，如：4行3列。2、选中整个表格，右击，选“边框和底纹”，单击“设置”里的“无”，在“宽度”里选“1 1/2磅”，在“预览”里单击上边框和下边框那两个图标，单击“确定”。3、选中整个表格，右击，选“边框和底纹”，在“宽度”里选“1/4磅”，在“预览”里单击表格内部的单元格横线那个图标，单击“确定”。4、选中表格2~3行所有单元格，右击，选“边框和底纹”，在“预览”里单击表格内部的单元格...
用HTML绘制三线表,CSS制作三线表 | 学步园
weixin_33917474的博客
06-30 1904
无标题文档table {border-collapse:collapse; /* 关键属性：合并表格内外边框(其实表格边框有2px，外面1px，里面还有1px哦) */border:solid #000000; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */border-width:2px 0 2px 0px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 ...
三线表的制作
06-06
三线表的制作,WORD2007,WORD2003最实用版本,保证一学就会
Html细线表格的实现
weixin_33859504的博客
01-10 196
在网页制作中，我们常常会使用到表格，表格使得需要表达的信息更清楚，明了。 <table border="1" cellspacing="0" bordercolor="#000000" width = "80%"> <tr> <td>1.1</td> <td>1.2...
html三线表制作方法
07-28
- *2* [CSS制作三线表 | 学步园](https://blog.youkuaiyun.com/weixin_33917474/article/details/118377780)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common...
三线表要求
最新发布
03-24
2. 使用Excel制作的数据表能否转换成适合出版物使用的三线表格式？ 3. LaTeX以外的文字处理软件支持三线表功能吗？如果有，请列举几个实例。 4. 在HTML/CSS环境中怎样模拟出类似于LaTeX `booktabs`效果的三线表？ 5....
jquery制作一个三线表
11-19
以下是使用jQuery制作一个三行表的示例代码： ```html <!DOCTYPE html> 三行表 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> table { border-...
【Word文档制作精进】：解锁三线表的正确打开方式
![word里的三线表怎么画](https://f.fwxgx.com/w/image/20220425/1650869191258091181.png) ...本章将概述如何通过对Word文档的基本操作和格式化技巧的深入理解，提升文档制作水平，为后续章节学习三线表的
漂亮的表格css+html
06-27
一个很好的表格html代码，里面包含了大量的css表格类型，界面清晰、清爽、相当的漂亮！@
用html制作的小网站
01-09
用html制作的小型网站，适合初学者学习的好资料
html中横线中间加字_干货|学术论文中的“三线表”如何绘制？
weixin_32467749的博客
12-18 1051
SCI最新专题在科研过程中，大家用到最多的可能就是“三线表”。“三线表”，一般主要由三条横线构成，当然在变量名栏里也可以拆分单元格，出现更多的线。更重要的是，“三线表”也是一种数据记录规范，以“三线表”形式记录的数据一般可直接导入统计、绘图软件（如SPSS、Origin，R等）进行数据处理或可视化。之前我们写过R语言绘制三线图，详情可戳：手把手教你绘制临床三线表闲言少叙，下面就讲讲如何快速在Wor...
css 制作图表
前端博客
07-22 1250
把工作中经常使用的一些能使用css 制作的一些图标，进行笔记，方便下次调用和分享，笔记持续更新 css /* 三角形小标 */ .sanjiao{ width: 0; height: 0; overflow: hidden; border-width: 10px; border-color: transparent transparent red t...
html菜单三条横线,Word上怎么制作就三条横线的表格？
weixin_33783283的博客
06-11 802
回答：一、在Word表格中点击要画斜线的最左上角的单元格，选择菜单工具栏中的“表格”点击，找到“绘制斜线表头”选项，点击。如图：二、点击后出现了“插入斜线表头”对话框，对话框中有五种斜线样式，可以根据需要进行选择。如图：三、比如选择了“样式三”，就可以按照需要在表格内添加文字。如图：如果单元格太小，系统可能会自动提示所远单元格太小而提示不能插入斜线表头，此时你单击“确定”按钮单元格将自动调整并成功...
1.2 HTML“三表”
weixin_30614587的博客
06-17 175
HTML“三表” 表单（form） 表格（table） 列表（list） 表单（form） 输入文件型表单＜form action=“URL”(或空格) method=“post/get”＞　　＜input /＞　　......... .......... ＜/form＞ 　　get:从服务器上面取数据 post：向外传输数据 　　get：不加密，明文...
如何用HTML制作一个3行3列的表格,如何利用表格制作网页
weixin_34620163的博客
06-19 7910
将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中，还是在网页设计中，表格通常都可以使信息更容易理解。HTML 具有很强的表格功能，使用户可以方便地创建出各种规格的表格，并能对表格进行特定的修饰，从而使网页更加生动活泼。HTML 表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列，从而获得特定的表格效果。表格在网页设计中...
三种细线表格CSS代码
CHBOS的专栏
07-30 3555
背景设置式－细边框表格texttexttexttext 边框设置式－细边框__表格2 边框设置式－细边框表格texttexttexttext
三线表格设置方法
yy13210520的专栏
04-25 2893
<br />选中整个表格，然后右键单击表格，选中边框和底纹，选择应用于表格，选择合适的线型和颜色，把线给勾出来，点击确定。然后选中第二列，选择应用于表格，选择合适的线型和颜色，把下面的线也给勾出来，点击确定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值