HTML table CSS

最新推荐文章于 2025-06-08 21:13:28 发布
原创 最新推荐文章于 2025-06-08 21:13:28 发布 · 169 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#HTML #CSS

本文介绍了一个使用CSS进行表格样式的具体实例。通过定义类名为'def'的<tr>元素及内部<th>和<td>元素的样式，实现了表格边框的统一风格。每个单元格都拥有灰色实线边框，并且对顶部和底部填充进行了设定。
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>TABLE CSS</title>
<style type="text/css">
<!--
table {
border:1px solid #A9B3CD;
border-collapse:collapse;
}
tr.def {
padding-top: 2px;
padding-bottom: 2px;
}
tr.def td{

border: solid #A9B3CD; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */
border-width: 1px 1px 1px 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */

}
tr.def th{

border: solid #A9B3CD; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */
border-width: 1px 1px 1px 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */

}

--!>
</style>
</head>

<body>

<table width="600">

<tr class="def">
<th>A</th>
<th>ABCD</th>
<th>ABCD</th>
<th>ABCD</th>
<th>ABCD</th>
</tr>
<tr class="def">
<td align="right">ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
</tr>
<tr class="def">
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
</tr>
<tr class="def">
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
</tr>
<tr class="def">
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
<td>ABCD</td>
</tr>
</table>

</body>

</html>
前端css中table表格的属性使用
小蜗牛764号的博客
04-20 4906
今天学习到关于table（表格）的css属性，为了让学习更有趣以及回顾往日的学习内容，笔者除了描写关于基本的宽、高、间距等属性外，还添加了前几天的博文提到“:hover”伪类选择器的使用，transition(过渡)的使用，以及给表格添加背景颜色或图片，模糊和阴影效果等。有时候自己对于某个知识了解后，要自己描写把它写出来真不容易。本文是在学习table表格中的css属性的同时，还结合了前面几天学到的知识transition、hover等。
CSS.table.rar_Table_css table_table css_表格css
09-20
以下是一些关于"CSS.table.rar_Table_css table_table css_表格css"中涉及的关键知识点： 1. **表格元素基础**： - `<table>`：这是HTML中创建表格的基本标签，用于定义表格的结构。 - `<tr>`：表示表格行（Table...
HTML Table 漂亮的CSS
03-26
HTML Table 漂亮的CSS 包含了格式各样的CSS，代码非常独立，肯定能够让你用到的。
每日知识总结
m0_73801853的博客
09-19 403
thead,tbody，tfoot通常配合适用,用于划分表格语义，实现长表格分步加载，或通过改变结构顺序，优先加载tbody。每个表格均有若干行（由`tr`标签定义），每行被分割为若干单元格（由`td `标签定义）。**注意**：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。现在，用于显示、展示数据。CSS中的注释以"注释以`/*`开头，以`*/`结尾,开始和结束中间为注释内容。- 作用:表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型。
html中常用的table表格的css
web开发自学
03-01 179
table {border-collapse: collapse;border: 1px black solid; } tr td { border: 1px black solid; height: 20px; text-align:center; } .tdcenter { align:center; valign:center; } .t...
html table css 样式,table Css常用样式
weixin_39776991的博客
06-19 319
table Css常用样式第一行第二行&相关文档：作者：tinyhill　来自：蓝色理想 对 《5 个简单实用的 CSS 属性》进行编辑1、CSS Clip剪辑 (clip) 属性就像一个面具。它允许你使用矩形掩盖页面元素的内容。要剪辑一个元素：你必须指定其 position 属性为 absolute，然后指定相对于元素的top，right，bottom，left 值。图片剪辑实例(演示...
html table 的 css styling 例子
学习笔记
03-03 462
web 开发中 table 的使用已不再像之前那样广泛。 html markup：首先使用 <table> tag ，然后此 table 语义上分两个部分: thead, tbody ，然后 tr 表示 table row, td 表示 table data，然后第1行以及第1列的所有所有内容根据 Html semantic 规则都应放在 <th> 内，而不是 <td> 内，一个html table ： <table> <thead>
纯CSS渲染的html5冻结固定table表格首行首列示例
09-20
传统的实现方式可能依赖JavaScript，但HTML5和CSS3的引入为我们提供了一种更为简洁和高效的方法。 在本示例中，我们将探讨如何仅使用CSS来实现固定表格的首行和首列。这不仅简化了代码，而且提高了性能，因为不需要...
利用js+css+html实现固定table的列头不动
11-26
总结来说，实现固定table列头不动的技术主要涉及到CSS的绝对定位、JavaScript的事件监听和DOM操作。通过JavaScript动态调整固定表头的宽度和位置，以及CSS使其在滚动时始终保持可见，从而达到预期效果。这个方法不仅...
用html和css写表格(table)
weixin_49853257的博客
11-30 2297
表格 1.表格的结构 <table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td>9</td> <td>10</td&
CSS/HTML-table表格使用方法
xinshoumaiba007的博客
05-30 324
border-collapse：属性设置表格的边框是否被折叠成一个单一的边框或隔开。-css用法 通俗讲就各个单元格的边框将会合并在一起。 table { border-collapse:collapse; } colspan ：这个属性就是定义两个左右相邻的单元个是否合并 通俗说，如果这个表格有多少列，colspan后面的数字就输入多少个，起到了合并单元格的作用。 <tr> <td colspan="2" style="te
html表格标签以及CSS基础
Yuanan_a的博客
07-19 1265
html基础知识
HTML+CSS之表格(15个案例+代码+效果图+素材)
请输入博客简介
10-05 9929
案例:编写一个简单的网页；制作一个带边框的表格，制作一个带边距的表格，制作一个指定宽高的表格，表格内容居中，为table添加背景色，设置行高，使表格内容垂直居中 table属性,border,cellspacing,cellpadding,width,height,align,bgcolor,
HTML&CSS Table元素详细解说
weixin_30381793的博客
03-09 245
1.预热 css样式多如牛毛，我不可能一个一个去讲，那样好像背字典一样，我相信你们也不喜欢这样的方式。所以，我会在实战中慢慢和你讲解，然后，你记住一些重要的css属性就可以了。关键是，你要学会去查资料，最好的查资料方法，不是那种去W3C School上，一页一页看过去，那样的话不知道要看到什么时候，而是应该去看一些网页的源码，看看他们的网页是怎么做起来的，用了哪些css属性？这里面，肯定...
CSS 表格table：HTML 表格从基础结构到复杂样式
waterlin2011的博客
05-24 1079
掌握这些基础属性和实战技巧，即使是复杂的数据表格也能轻松驾驭。
html css样式之table
桔子大大
07-02 865
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 + CSS 连载 | 30 - HTML 表格
JingnanJia的博客
10-30 165
但是这里还有一个问题，每个单元格都有自己的边框线，但其实相邻单元格只需要一个边框线就可以了。效果与之前没有使用这些语义化元素时的效果一致，除了首行没有边框外，当然我们也可以对。来解决重复边框线的问题，该属性用来决定表格的边框是分开的还是合并的，属性值为。表格有很多相关的属性可以设置表格的样式，但是已经不推荐使用了；一个 tr 元素只表示一行内容，因此我们需要增加更多的 tr；接着我们还需要给表格的第一行内容及表头的字体加粗，给第一行的。可以看到首行的边框也被加上去了，当然我们也可以使用结构伪类对。
HTML--CSS表单表格属性
最新发布
qazplm12580的博客
06-08 325
3. 标签对齐（Flexbox 布局）二、表格（Table）样式。一、表单（Form）样式。
html表格展开格式,4款简单常见的纯CSS表格(table)样式
weixin_35851482的博客
05-31 3130
本文介绍4款简单常见的纯CSS表格(table)样式。1、默认表格(default table)添加pure-table类样式化表格，此类向表元素添加填充(padding)和边框(borders)，并使表头突出。默认表格html代码html>Table_SimpleCSSforHTMLtableshtml{font-family:sans-serif;-ms-text-size...
html中table的css
03-08
### 关于HTML表格(CSS Table)的样式设置 #### 基本属性应用实例 对于`<table>`标签而言，可以利用多种CSS属性实现不同的视觉效果。例如，通过定义边框、背景颜色以及文字对齐方式等基础样式来增强表格的表现力[^1]...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值