从 HTML 样式到 CSS 样式答案

【问题标题】：Moving from HTML styling to CSS styling从 HTML 样式到 CSS 样式
【发布时间】：2013-05-17 15:39:16
【问题描述】：

我目前有如下表定义：

<table border="1" cellspacing="0" bordercolor="#CEDFEF" cellpadding="1">

我正在尝试将其转换为 CSS，使用：

table{border:1px solid #CEDFEF;cellspacing = 0px;cellpadding = 1px}

不过，表格并没有按应有的方式呈现。我做错了什么？

其次，如果我想不将此样式具体应用到我的一个表，我该怎么做？

【问题讨论】：

您不能将任何 HTML 属性“转换”为 CSS。要使某些表适用于某些表而不适用于其他表，只需使用类名即可。

标签： html css

【解决方案1】：

我预计问题出在 cellpading 和/或 cellspacing 上。这不是有效的 CSS：

cellspacing = 0px;cellpadding = 1px

已经有一些问题了：

Set cellpadding and cellspacing in CSS?

Why are cellspacing and cellpadding not CSS styles

希望对你有帮助。

【讨论】：

【解决方案2】：

你来了，祝你新年快乐！

您需要在 css 中使用边框、填充和颜色来优化表格，而不是单元格填充和默认内容。您网站中所有表格的代码：

table { 
width: 100%;
border-collapse: collapse;
border-bottom:1px solid #e1e1e1;
border-top:1px solid #e1e1e1;
margin-bottom: 10px;
background-color: #FFF; 
}

table td {
padding: 4px 10px;
border-right:1px solid #e1e1e1;
border-left:1px solid #e1e1e1;
}

table th {
padding: 4px;
text-align: left;
border-right:1px solid #e1e1e1;
border-left:1px solid #e1e1e1;
font-weight: normal;
}

table tr {
border-left:1px solid #e1e1e1;
border-top:1px solid #e1e1e1;
}

对于没有通用样式的表格，只需将类添加到表格标签（exapmle1）：

table.example1 {
width: 100%;
border-collapse: collapse;
border-bottom:0px solid #e1e1e1;
border-top:0px solid #e1e1e1;
margin-bottom: 20px;
padding-bottom: 20px;
background-color: #FFF;
}

table.example1 td {
padding: 0px 0px;
border-right:0px solid #e1e1e1;
border-left:0px solid #e1e1e1;
}

table.exapmle1 th {
padding: 0px;
text-align: left;
border-right:0px solid #e1e1e1;
border-left:0px solid #e1e1e1;
font-weight: normal;
}

table.example1 tr {
border-left:0px solid #e1e1e1;
border-top:0px solid #e1e1e1;
}

您还可以使用更多类自定义许多东西...

table.exapmle1 td {
text-align: center;
}

table.exapmle1 td.left {
text-align: left;
font-weight: bold;
}

table.exapmle1 td.right {
text-align: right;
}

例如，将类添加到 td 标记中。

希望这会有所帮助。

【讨论】：

【解决方案3】：

通常不可能转换与表格相关的 HTML 属性以保留准确的外观。主要原因是 HTML 属性在不同的浏览器中有模糊的定义和不同的解释，如您所见，例如通过在 IE 和 Firefox 上查看具有给定属性的页面。无法在 CSS 中复制这种对浏览器的依赖。

以下样式表假定您的标记具有<table class=t>，它尝试复制具有给定属性的表格的“典型”或“平均”呈现：

table.t { 
  border-collapse: collapse;
  border: outset #CEDFEF 2px;
}
table.t th, table.t td { 
  border: inset #CEDFEF 2px;
  padding: 1px;
}

将表示性 HTML 属性转换为 CSS 很少有用。在设计新的或完全重写的文档时，最好从所需的外观而不是一些现有的或假设的 HTML 属性开始。例如，实心边框通常比<table border> 创建的初始或插入边框看起来更好，并且很少有 1px 的填充（通常您希望左右没有填充或几个像素，顶部和底部都没有） .

一般信息：Mapping presentational HTML to CSS。另请参阅 WHATWG HTML5 草案的渲染部分中的 Tables 小节。

【讨论】：

【解决方案4】：

这是 CSS 样式中的另一种方式..!!

在 html 中为许多表格设置样式时，我们可以按照这种方式..!!

希望对你有帮助

在 CSS 中：

#list
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border:dashed;
background-color:#CC0099;
border-bottom:1px dashed;
border-top:1px dashed;
border-collapse:collapse;
}

在正文部分，我们可以简单地给出名称...！！

<table id="list">

【讨论】：