HTML table CSS

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

#HTML #CSS

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

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

<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 4682
今天学习到关于table（表格）的css属性，为了让学习更有趣以及回顾往日的学习内容，笔者除了描写关于基本的宽、高、间距等属性外，还添加了前几天的博文提到“:hover”伪类选择器的使用，transition(过渡)的使用，以及给表格添加背景颜色或图片，模糊和阴影效果等。有时候自己对于某个知识了解后，要自己描写把它写出来真不容易。本文是在学习table表格中的css属性的同时，还结合了前面几天学到的知识transition、hover等。
用html和css写表格(table)
weixin_49853257的博客
11-30 2242
表格 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&
HTML Table 漂亮的CSS
03-26
HTML Table 漂亮的CSS 包含了格式各样的CSS，代码非常独立，肯定能够让你用到的。
每日知识总结
m0_73801853的博客
09-19 373
thead,tbody，tfoot通常配合适用,用于划分表格语义，实现长表格分步加载，或通过改变结构顺序，优先加载tbody。每个表格均有若干行（由`tr`标签定义），每行被分割为若干单元格（由`td `标签定义）。**注意**：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。现在，用于显示、展示数据。CSS中的注释以"注释以`/*`开头，以`*/`结尾,开始和结束中间为注释内容。- 作用:表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型。
HTML与CSS交互，创建一个简单的多样式表格
最新发布
WeChatVme50xx的博客
04-26 502
 通过这篇总结，希望能加深大家对HTML和CSS的理解能力，结尾附上全文代码
html中常用的table表格的css
web开发自学
03-01 160
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&CSS Table元素详细解说
weixin_30381793的博客
03-09 223
1.预热 css样式多如牛毛，我不可能一个一个去讲，那样好像背字典一样，我相信你们也不喜欢这样的方式。所以，我会在实战中慢慢和你讲解，然后，你记住一些重要的css属性就可以了。关键是，你要学会去查资料，最好的查资料方法，不是那种去W3C School上，一页一页看过去，那样的话不知道要看到什么时候，而是应该去看一些网页的源码，看看他们的网页是怎么做起来的，用了哪些css属性？这里面，肯定...
html table css 样式,table Css常用样式
weixin_39776991的博客
06-19 299
table Css常用样式第一行第二行&相关文档：作者：tinyhill　来自：蓝色理想 对 《5 个简单实用的 CSS 属性》进行编辑1、CSS Clip剪辑 (clip) 属性就像一个面具。它允许你使用矩形掩盖页面元素的内容。要剪辑一个元素：你必须指定其 position 属性为 absolute，然后指定相对于元素的top，right，bottom，left 值。图片剪辑实例(演示...
纯CSS渲染的html5冻结固定table表格首行首列示例
09-20
传统的实现方式可能依赖JavaScript，但HTML5和CSS3的引入为我们提供了一种更为简洁和高效的方法。 在本示例中，我们将探讨如何仅使用CSS来实现固定表格的首行和首列。这不仅简化了代码，而且提高了性能，因为不需要...
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...
利用js+css+html实现固定table的列头不动
11-26
总结来说，实现固定table列头不动的技术主要涉及到CSS的绝对定位、JavaScript的事件监听和DOM操作。通过JavaScript动态调整固定表头的宽度和位置，以及CSS使其在滚动时始终保持可见，从而达到预期效果。这个方法不仅...
html table 的 css styling 例子
学习笔记
03-03 431
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/HTML-table表格使用方法
xinshoumaiba007的博客
05-30 305
border-collapse：属性设置表格的边框是否被折叠成一个单一的边框或隔开。-css用法 通俗讲就各个单元格的边框将会合并在一起。 table { border-collapse:collapse; } colspan ：这个属性就是定义两个左右相邻的单元个是否合并 通俗说，如果这个表格有多少列，colspan后面的数字就输入多少个，起到了合并单元格的作用。 <tr> <td colspan="2" style="te
html表格标签以及CSS基础
Yuanan_a的博客
07-19 1246
html基础知识
HTML+CSS之表格(15个案例+代码+效果图+素材)
2301_76862031的博客
10-05 8811
案例:编写一个简单的网页；制作一个带边框的表格，制作一个带边距的表格，制作一个指定宽高的表格，表格内容居中，为table添加背景色，设置行高，使表格内容垂直居中 table属性,border,cellspacing,cellpadding,width,height,align,bgcolor,
html css样式之table
桔子大大
07-02 830
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表格展开格式,4款简单常见的纯CSS表格(table)样式
weixin_35851482的博客
05-31 3032
本文介绍4款简单常见的纯CSS表格(table)样式。1、默认表格(default table)添加pure-table类样式化表格，此类向表元素添加填充(padding)和边框(borders)，并使表头突出。默认表格html代码html>Table_SimpleCSSforHTMLtableshtml{font-family:sans-serif;-ms-text-size...
【HTML+CSS】HTML表格：从基础到进阶的全面指南
Xiaoxin的博客
07-26 1805
在Web开发中，HTML表格（）是一个不可或缺的元素，它不仅能够以结构化的方式展示数据，还能通过CSS进行丰富的样式设计，提升用户体验。本文将带你从HTML表格的基础语法开始，逐步深入到表格的高级用法，包括布局技巧、响应式设计以及无障碍访问性优化。
2024年最全HTML&CSS Table元素详细解说，小白也能懂的前端教程！，面试技巧总结
2401_84618023的博客
05-14 804
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
html中table的css
03-08
### 关于HTML表格(CSS Table)的样式设置 #### 基本属性应用实例 对于`<table>`标签而言，可以利用多种CSS属性实现不同的视觉效果。例如，通过定义边框、背景颜色以及文字对齐方式等基础样式来增强表格的表现力[^1]。 ```css /* 定义整个表格的基础样式 */ table { border-collapse: collapse; /* 边框合并 */ width: 100%; /* 表格宽度 */ } th, td { text-align: left; /* 文字左对齐 */ padding: 8px; /* 单元格内填充 */ } ``` #### 进阶布局技巧 当希望进一步优化表格结构时，则可以通过指定特定的选择器（如`.classname`或`#idname`），针对不同部分单独定制样式[^2]： ```css /* 使用类名选择器自定义表头样式 */ thead th { background-color: #f2f2f2; color: black; } /* 针对奇数行添加交替底色 */ tr:nth-child(odd) { background-color: #dddddd; } ``` #### 特殊情况处理 有时为了适应更复杂的需求，还可以引入额外的功能性CSS属性，比如让表格具有响应式设计的能力，在移动设备上也能良好显示[^3]。 ```css @media screen and (max-width: 600px){ table, thead, tbody, th, td, tr { display: block; } /* 调整单元格展示形式以便阅读 */ td::before{ content: attr(data-label); /* 显示列标题作为前缀 */ float: left; font-weight: bold; } } ``` 上述代码片段展示了如何运用CSS美化并功能化HTML中的表格元素，不仅限于此处列举的内容，实际开发过程中可根据具体场景灵活组合各种样式规则达成理想的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值