我想调整一些表格以获得我的界面的最佳呈现。是否有一种好的做法来指定表格列的宽度? (例如,如果我想将第一列显示为 100 像素宽,第二列显示为 80 像素宽,第三列显示为 60 像素宽。)
我查看了 HTML Table column width practices,但是选择的答案(虽然对提出问题的用户有用)没有描述如何做到这一点。
该问题的另一个答案建议使用 <col>
为每一列分配一个类,然后确定 CSS 中的宽度。然而,这似乎不够优雅,评论者提出了 <col>
标签的问题。另外,我相信它在 HTML5 中已被弃用?
HTML
<table>
<col class=width100>
<col class=width80>
<col class=width60>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</table>
CSS
width100 {
width: 100px;
}
width80 {
width: 80px;
}
width60 {
width: 60px;
}
这看起来相当不雅,而且我不确定 <col>
标签的可靠性/弃用。有没有更好的办法?
我会把你的问题分成两部分,先回答第二部分:
Part 2: However, this seems inelegant and a commenter suggests issues
with the tag. Also, I believe it has been deprecated in HTML5?
没有。它在 HTML5 中没有被弃用。事实上,colgroup
和col
一起作为表格的一部分是非常重要的元素。
例如看看这个引用:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
...defines a column within a table and is used for defining common
semantics on all common cells...
再往下说:
CSS properties and pseudo-classes that may be specially useful to
style the element: the width property to control the width of
the column;...
通过此引用:http://www.w3.org/TR/2012/WD-html-markup-20120329/col.html#col
The width attribute on the col element is obsolete. Use CSS instead
总而言之,您最好使用 colgroup
和/或 col
来布置表格。它们帮助您在所有对应的单元格上定义通用语义。 CSS 是应用宽度的推荐方法,它有助于将表格的表示与标记分开。使用 colgroup
和/或 col
实际上会为您省去很多麻烦,并让您更好地控制您的表。
Part 1: Is there a good practice way to specify the widths of table
columns? (e.g. If I want to display the first column as 100px wide,
the second as 80px wide and the third as 60px wide.)
同样,如果您引用文档,您会发现通过 col
将宽度委托(delegate)给 CSS 是一个值得遵循的好习惯。理想情况下,您希望为整个应用程序/网站使用一致的宽度单位。如果您使用的是具有百分比的流体布局,那么为您的表格保留百分比单位也是非常有意义的。如果您正在设计像素网格布局,那么像素会更适合您的表格。
如果需要,将表示部分委托(delegate)给 CSS 还可以帮助您实现响应式布局。
编辑:
关于您描述的问题,人们说 CSS 类名必须“标识页面上元素的类,而不是要在样式中应用的标量值”,并且它不是语义的,而且所有那些东西:
我个人不同意这一点。
IMO:请参见:( http://getbootstrap.com/css ) 作为示例。虽然 bootstrap 没有在名称中使用宽度(逐字),但它确实使用度量作为类名称的一部分。例如col-xs-6
(一个跨越 4 列的超小列)。一定要以适合您且易于理解的方式命名您的类(class)。继续,创建您自己的命名约定。