HTML 表格 : Is there a good practice for specifying column widths?

标签 html css

<分区>

我想调整一些表格以获得我的界面的最佳呈现。是否有一种好的做法来指定表格列的宽度? (例如,如果我想将第一列显示为 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 中没有被弃用。事实上,colgroupcol一起作为表格的一部分是非常重要的元素。

例如看看这个引用: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)。继续,创建您自己的命名约定。

关于HTML 表格 : Is there a good practice for specifying column widths?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23930456/

相关文章:

html - CSS div 对齐

javascript - 在 div 内单击时显示图像,单击时也会淡入

javascript - 每当元素获得该类时,根据类附加点击处理程序

python - 如何在 Beautifulsoup 标签中插入空格 (&nbsp)?

html - 我可以让 <img> `srcset`/`sizes` 属性考虑到我对 `object-fit: cover` 的使用吗?

html - div 中的垂直居中文本/图像不起作用

html - 阻止表单元素破坏内部元素的格式

PHP session 将无法工作

css - 线性增加颜色暗度算法

CSS 最佳实践 - 对齐第一个 :