TABLE 的css的样式表

最新推荐文章于 2024-04-19 20:39:07 发布
最新推荐文章于 2024-04-19 20:39:07 发布
阅读量3w 收藏 1
点赞数
文章标签： table css class border stylesheet input
TABLE 的css的样式表
<script></script> 标签：css it   
TABLE 的css的样式表
 
 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

下面为HTML


<head>
<title></title>
<link rel="stylesheet" href="table.css" type="text/css" media="screen" />
</head>
<body>
<table class="admintable" width="100%">
   <tr>
     <th class="adminth">标题&lt;th&gt;</th>
     <th class="adminth">标题&lt;th&gt;</th>
     <th class="adminth">标题&lt;th&gt;</th>
     <th class="adminth">标题&lt;th&gt;</th>
   </tr>
   <tr>
     <td class="admincls0">内容1</td>
     <td class="admincls0">内容1</td>
     <td class="admincls0">内容1</td>
     <td class="admincls0">内容1</td>
   </tr>
   <tr>
     <td class="admincls1">内容1</td>
     <td class="admincls1">内容1</td>
     <td class="admincls1">内容1</td>
     <td class="admincls1">内容1</td>
   </tr>
   <tr>
     <td class="admincls0">内容1</td>
     <td class="admincls0">内容1</td>
     <td class="admincls0">内容1</td>
     <td class="admincls0">内容1</td>
   </tr>
   <tr>
     <td class="admincls1">内容1</td>
     <td class="admincls1">内容1</td>
     <td class="admincls1">内容1</td>
     <td class="admincls1">内容1</td>
   </tr>
</table>
<p>&nbsp;</p>
<table width="245" height="241" border="1" cellspacing="0" bordercolor="#99BCFC">
   <tr>
     <th class="adminth_s2" width="57" scope="row">标题</th>
     <td width="178" bgcolor="#EAEAEA"><p>
       <input name="textfield" type="text" id="textfield" size="25" />
     </p>     </td>
   </tr>
   <tr>
     <th class="adminth_s2" scope="row">标题</th>
     <td bgcolor="#EAEAEA"><p>
       <input name="textfield2" type="text" id="textfield2" size="25" />
     </p>     </td>
   </tr>
   <tr>
     <th class="adminth_s2" scope="row">标题</th>
     <td bgcolor="#EAEAEA"><p>
       <input name="textfield3" type="text" id="textfield3" size="25" />
     </p>     </td>
   </tr>
   <tr>
     <th class="adminth_s2" scope="row">标题</th>
     <td bgcolor="#EAEAEA"><p>
       <input name="fileField" type="file" id="fileField" size="15" />
     </p>     </td>
   </tr>
   <tr>
     <th class="adminth_s2" scope="row">标题</th>
     <td bgcolor="#EAEAEA"> <p>
       <textarea name="textarea" id="textarea" cols="23" rows="6"></textarea>
     </p>     </td>
   </tr>
</table>
<p>&nbsp;</p>
<table width="200" class="admintable_s2"   cellspacing="0">
   <tr>
     <td class="admintd">标题</td>
     <td>内容</td>
   </tr>
   <tr>
     <td class="admintd">标题</td>
     <td>内容</td>
   </tr>
   <tr>
     <td class="admintd">标题</td>
     <td>内容</td>
   </tr>
</table>
<p>&nbsp;</p>
<table width="200" class="stage" cellspacing="0">
   <tr>
     <td colspan="2" class="stagetd">标题内容stagetd</td>
   </tr>
   <tr class="stagetr_tr1">
     <td>内容</td>
     <td>内容</td>
   </tr>
   <tr class="stagetr_tr2">
     <td>内容</td>
     <td>内容</td>
   </tr>
   <tr class="stagetr_tr1">
     <td>内容</td>
     <td>内容</td>
   </tr>
   <tr class="stagetr_tr2">
     <td>内容</td>
     <td>内容</td>
   </tr>
</table>
<p>&nbsp;</p>
</body>
</html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

下面为css


table.admintable {
border:1px solid #AEDEF2;
border-collapse: collapse;
}

table.admintable_s2{
color:#658fd4;
border-bottom:#aedef2 thin solid;
border-left:#aedef2 thin solid;
border-right:#aedef2 thin solid;
border-top:#aedef2 thin solid;
background-color: #eef6fe;
font-size:12px;
font-family:"新宋体";
overflow:auto;
}

td.admintd{
color: #0066cc;
font-size:14px;
color:#05B;
}

th.adminth {
width: 671px;
color: #0066cc;
background-color: #eef6fe;
font-size:14px;
color:#05B;
border:1px solid #AEDEF2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#AEDEF2,endColorStr=ghostwhite);
}

th.adminth_s2 {
width: 671px;
color: #0066cc;
background-color: #eef6fe;
font-size:14px;
color:#05B;
border:1px solid #AEDEF2;
}

td.admincls0 {
border:1px solid #AEDEF2;
background:ghostwhite;
font-size:12px;
font-family: 新宋体;
color: #333;
}

td.admincls1 {
border:1px solid #AEDEF2;
background:#DAF0F1;
font-size:12px;
font-family: 新宋体;
color: #333;
}
th.menu {
color: #006699;
font-family: "新宋体";
font-size: 14px;
}

td.stagetd{
color:#236E11;
font-size:14px;
font-family:"新宋体";
border-bottom:#456602 thin dashed;
background:#EBFEC5;
}
table.stage{
border-bottom:#FFFFFF thin solid;
border-left:#FFFFFF thin solid;
border-right:#FFFFFF thin solid;
border-top:#FFFFFF thin solid;
font-size:14px;
font-family:"新宋体";
overflow:auto;
}
tr.stagetr_tr1{
border-bottom:#FFFFFF thin solid;
border-left:#FFFFFF thin solid;
border-right:#FFFFFF thin solid;
border-top:#FFFFFF thin solid;
background-color: #EBFEC5;
font-size:12px;
font-family:"新宋体";
}
tr.stagetr_tr2{
border-bottom:#FFFFFF thin solid;
border-left:#FFFFFF thin solid;
border-right:#FFFFFF thin solid;
border-top:#FFFFFF thin solid;
font-size:12px;
font-family:"新宋体";
}

郑重声明：

此文章摘于新浪快乐女孩歪歪的博客。

hushuai_5
关注
【CSS】Table样式
weixin_33920401的博客
05-19 3698
一、table td的宽度详解 Table只有Table的宽度是可以设置的，并且各个浏览器理解一致 原则上应该将table的宽度设置成一个固定的值，而不应该设置成一个根据屏幕变化的值 Table的宽度为600px,Table的td所有宽度总和不到600px,浏览器会自动按照td的宽度的比例算出宽度 <table style="width: 600px;border-co...
CSS-table样式+
weixin_47345929的博客
11-30 1515
table样式 table一般不用来布局，主要用来格式化数据。 属性： width:宽度 height:高度 border-collapse:collapse; 单线边框 border:边框线 td,tr属性： width:宽度 height:高度 text-align:文本水平方向对齐方式(left(默认)/center/right) vertical-align:文本垂直方向对齐方式(top/middle(默认)/bottom) 列表样式 不是描述性的文本的任何内容都可以认为是列表。比如：菜单、商品列
好看table样式 好看的CSS——Table样式表
04-01
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
table完美css样式，table的基本样式，table样式
weixin_33971130的博客
06-15 2049
table完美css样式，table的基本样式，table样式   &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;
好看的table-css样式
qq_45450789的博客
04-13 5954
1.单像素边框css表格 源代码： <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } table.gridtable t.
关于CSS样式表文件组织形式的整理
12-12
在当前的Web开发环境中，CSS样式表已经成为构建网站不可或缺的一部分，各大企业和IT公司对其关注度日益提升，学习者们也热情高涨。随着CSS的广泛应用，样式表文件变得越来越大、越来越复杂，这给文件的维护和组织...
CSS样式表教程：浏览器默认样式
09-27
在网页设计中，CSS样式表起着至关重要的作用，它决定了网页元素的外观和布局。然而，不同浏览器之间对相同HTML元素的默认样式处理存在差异，这是CSS样式表教程中经常提到的一个问题。这种差异性可能导致同一个网页在...
markdown.css:优雅的样式表，用于呈现Markdown内容
04-28
优雅的样式表，用于呈现Markdown内容 入门 Markdown.css是一个基于大型Web和应用程序项目CSS开发工作多年的附带项目。 Markdown.css仅包含标题，段落，文本元素，列表，图像，blockquote，表格和代码CSS样式。 ...
Table CSS样式
07-30
在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、...总之，Table CSS样式是网页设计中的重要一环，通过熟练掌握相关技巧，我们可以创建出美观且功能强大的表格，满足各种设计需求。
漂亮的table样式（内附css）
08-10
漂亮的table样式（内附css） 漂亮的table样式（内附css）
好看的css table样式
01-19
好看的css table样式 常见用于报表相关
Table常用的几种CSS样式
03-23
针对Table经常使用的CSS样式，样式不错。 也可以到http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
好看的css table列表样式
07-19
好看的css table列表样式
挺好看的CSS TABLE样式
03-01
整体代码 博文链接：https://tylerxi.iteye.com/blog/215668
一些漂亮的CSS表格样式
07-28
一些非常漂亮实用的CSS表格样式,使用方便.页面简洁!
table Css常用样式
土豆的专栏
10-22 2828
                                                                                                     第                        一                        行                                                
table的css样式
h339678413的专栏
12-09 522
table的css样式 table { border: 1px solid #B1CDE3; padding:0;  margin:0 auto; border-collapse: collapse; } td { border: 1px solid #B1CDE3; background: #fff; font-size:12px; padding: 3px 3px
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
最新发布
u013179804的博客
04-19 7944
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
css表格样式
s1124yy
12-20 793
css表格样式链接：http://www.runoob.com/try/try.php?filename=try_ng_tables_css感觉这个css写的很好，简洁又好看！<style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-c
CSS样式表应用详解与常用特效
文档还回顾了CSS样式表的三种插入方式： 1. 嵌入样式表：将CSS直接写在HTML元素中，如`<table style="color:red;font-size:10pt">`。 2. 内部样式表：在HTML文件的`<head>`部分定义样式，如`<style>`标签内编写CSS...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值