我想创建一个表that would look like this fiddle
我想知道当前代码是否是创建此外观的最佳方式?
HTML:
<div id="wrapper">
<div id="margin">
<table width="720" border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="95" valign="top" class="style1"></th>
<th width="321" valign="top" class="style1">Column A</th>
<th width="369" valign="top" class="style1">Column B</th>
<th width="331" valign="top" class="style1">Column C</th>
</tr>
</thead>
<tbody>
<tr>
<td width="95" valign="top"><p>Row A</p></td>
<td width="321" valign="top"><p>Content</p></td>
<td width="369" valign="top"><p>Content</p></td>
<td width="331" valign="top"><p>Content</p></td>
</tr>
<tr>
<td width="95" valign="top"><p>Row B</p></td>
<td width="321" valign="top"><p>Content</p></td>
<td width="369" valign="top"><p>Content</p></td>
<td width="331" valign="top"><p>Content</p></td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
p, em, font, table, tr, th, td, thead, tbody, tfoot
{
font-size: 100%;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
line-height: inherit;
vertical-align: baseline;
border: 0;
outline: 0;
padding: 0;
margin: 0;
}
table {
table-layout: auto; border-collapse: separate; border-spacing: 0; empty-cells: show;
}
body
{
font-family: 'Alef', serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#wrapper {
border: 1px solid #000;
width: 940px;
background-color: #FFC;
min-height: 632px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
overflow: hidden;
}
.style1 {
background-color: #03C;
padding-bottom: 14px;
color: #FFFFFF;
font-weight: 400;
font-family: 'Open Sans';
vertical-align: middle;
}
#margin {
margin-bottom: 40px;
margin-left: 30px;
margin-right: 250px;
margin-top: 40px;
}
td,th {
color: #678197;
border-bottom: 1px solid #903;
border-left: 1px solid #903;
padding: .3em 1em 2em 1em;
text-align:left;
}
tr:nth-child(even) {
background-color:#CCC;
}
table {
border-top: 1px solid #903;
border-right: 1px solid #903;
background-color: #F4F2F3;
}
问题例如:
这是thead
,th
和tbody
标签的正确使用吗?
我真的必须对每个td应用class="style1"
吗? (如果我只将其应用于TR
,则不会正确影响字体。
这是在左上角留一个空格的正确方法吗?
我应该在CSS中定义border="1" cellpadding="0" cellspacing="0"
吗?
我希望Table的宽度是固定的,我应该用HTML(像现在这样)或CSS来表示吗?
您建议如何处理Cell的宽度?我应该在每个单元格上指出它们吗?它们在这里没有任何区别(你可以看到总宽度大于整个桌子的宽度)所以我不知道该怎么做。我将在每个单元格中更改文本量。
这是在单元格和表格之间创建红色边框的正确方法吗? (仅定义table
的右侧和顶部,td
仅左侧和下侧
谢谢!
答案 0 :(得分:1)
我的想法/答案
只要您确定了表格,就不必为每个td或tr创建特定的类。例如,您可以:
<table id="myUniquelyIdentiedTable">
<tr>
<th>Column A</th>
<th>Column B</th>
<tr>
....
</table>
然后在你的CSS中,你可以做类似的事情:
#myUniquelyIdentifiedTable th{
...
}
#myUniquelyIdentifiedTable td{
...
}
等
3)我倾向于为某些跨浏览器的兼容性实际指定一个空白
,但从语义上讲,它没有任何问题。
5)限制宽度,您可以用容器包装表并将容器限制为宽度。即。
<div class="tableWrapper">
<!-- your table here -->
</div>
// in your CSS
.tableWrapper{
width: 400px;
}
.tableWrapper table{
width: 100%;
}
6)对于单元格的宽度,我通常只将其设置在TH上,而不是所有TD上。如果可能,您可以为相关TH提供名称(即<th class="single-width">
),然后使用CSS .single-width{ width: 100px; }
7)我不会使用这种方法。我会将表格的背景颜色设置为红色,然后将TH和TD的背景设置为不同。 cellspacing和border设置将为您提供必要的边框颜色。 (这是老式的,但有效 - 还有其他方式来设置表格)