從HTML樣式轉向CSS樣式

Question

我目前有以下表定義：

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

我正在嘗試將其轉換為CSS，使用：

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

但是，表格不應該呈現。 我究竟做錯了什么？

其次，如果我想沒有采取這種造型我在特定的一個表，我該怎么辦呢？

Answer 1

我預計問題在於cellpading和/或cellspacing。 這不是有效的CSS：

cellspacing = 0px;cellpadding = 1px

已經有一些問題：

在CSS中設置cellpadding和cellspacing？

為什么cellspacing和cellpadding不是CSS樣式

我希望這可以幫助你。

Answer 2

在這里，你有一個美好的一年！

您需要使用邊框，填充和顏色與cellpadding和默認的東西來優化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標記中。

希望這可以幫助。

Answer 3

這是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;
}

在Body部分，我們可以簡單地命名...... !!

<table id="list">

Answer 4

通常無法轉換與表相關的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>創建的outset或inser邊框更好，並且1px的填充很少適合（通常你想要左邊和右邊沒有填充或幾個像素，頂部和底部都沒有）。

一般信息：將表示HTML映射到CSS 。 另請參閱WHATWG HTML5草稿的渲染部分中的子表 。