찾다
웹 프론트엔드CSS 튜토리얼표준화 - Table_CSS/HTML

对于那些刚接触CSS布局的人来说,常对如何使用表格(table)感到迷惑。我在很多地方看到人们把“避免用表格来布局”理解成“完全不使用table标签”。值得注意的是,表格是可以用的而且非常好用——只要用的正确。

是的,你得尽量的去避免用表格来布局。但是对于表格型数据,你就应该使用table。我想谈谈如何使用表格来组织表现表格型数据。在HTML和XHTML里,表格不仅仅是行(row)和单元格(cell),还有很多其他元素,特别是如果你想让数据更加容易理解。

首先来点背景知识,“避免用表格来布局”这句话可以在HTML 4.01 规范表格介绍部分里面找到:

表格不应该纯粹的被用来布局文档内容,这样可能在处理渲染非可视媒体的时候产生问题。另外,当和图片一起使用的时候,这些表格可能在某个系统上显示过大而强迫用户拖动水平滚动条,为了减少这些问题,设计者应该使用样式表来控制布局而不是表格。

这样已经很明白了,尽管文档中说“应该”而不是“必须”,所以这个规范还是有弹性的。

但是本文并不是讨论是否使用表格布局,而是使用表格来组织表现表格型数据——这是表格诞生的本意。

当表格用来组织实际的数据时,不仅仅是一个编排布局的格子而已。一般人可以从表格的编排和表现上看出标题和数据单元格之间的关系。盲人或者有视觉障碍的人则不能做到这一点。如果一个表格要让那些使用屏幕阅读器或用其他非可视用户代理(UA)的人们能够理解,它则需要告诉用户代理它包含的信息之间是如何联系起来的。

幸运的是,HTML在这方面提供了很多元素和属性。然而,使用这些可以增强易用性和语义化的功能比较难而且本身不容易理解。在本文中,我尝试着解释如何使用他们。

表头, <th> <p>让我们从一个非常简单的表格开始——只包含一行表头和两行三列的数据。如果用以前流行的做法,只用表格的行和单元格,写出来就如下:</p> <p> </p> <ol class="code"> <li> <code><table> <br> <li class="tab1"> <code><tr> <br> <li class="tab2"> <code><td>公司</td>

  • <td>雇员</td>
  • <td>成立于</td>

  • <tr> <br> <li class="tab2"> <code><td>ACME Inc</td>
  • <td>1000</td>
  • <td>1947</td>

  • <tr> <br> <li class="tab2"> <code><td>XYZ Corp</td>
  • <td>2000</td>
  • <td>1973</td>
  • 没有边框和修饰,那么上面的代码在你现在的浏览器里看起来就如下:

    <td>雇员</td> <td>成立于</td> <td>1000</td> <td>1947</td> <td>2000</td> <td>1973</td>
    公司
    ACME Inc
    XYZ Corp

    用CSS稍微修饰一下表格,你可以使表头在图形化浏览器里面更加明显:

    <td>雇员</td> <td>成立于</td> <td>1000</td> <td>1947</td> <td>2000</td> <td>1973</td>
    公司
    ACME Inc
    XYZ Corp

    一个视力正常的人,很容易并且很快就可以明白表头和数据单元格之间的关系。从另一方面讲,那些使用屏幕阅读器的人可以听到如下顺序的词:公司,雇员,成立于,ACME Inc,1000,1947,XYZ Corp,2000,1973。不是十分容易明白其中的关系。

    第一步——最简单的——通过适当的标出表头来使得表格更加有意义。很简单:只要使用<th>标签取代表头的<code><td>标签即可。 <ol class="code"> <li> <code><table> <br> <li class="tab1"> <code><tr> <br> <li class="tab2 changed"> <code><th>公司</th>

  • <th>雇员</th>
  • <th>成立于</th>

  • <tr> <br> <li class="tab2"> <code><td>ACME Inc</td>
  • <td>1000</td>
  • <td>1947</td>

  • <tr> <br> <li class="tab2"> <code><td>XYZ Corp</td>
  • <td>2000</td>
  • <td>1973</td>
  • <th>雇员</th> <th>成立于</th> <td>1000</td> <td>1947</td> <td>2000</td> <td>1973</td>
    公司
    ACME Inc
    XYZ Corp

    这个例子虽然简单,但是已经包含了足够的信息使得屏幕阅读器能够让使用者明白表头和数据单元格之间的关系。一个屏幕阅读器一般会这么读:公司: ACME Inc. ,雇员: 1000,成立于: 1947., 以此类推。比之前好多了。

    表格标题, <caption></caption>

    <caption></caption>标签可以为表格提供一个简短的说明,和图像的说明比较类似。默认情况下,大部分可视化浏览器显示表格标题在表格的上方中央。CSS里的caption-side属性用来控制表格标题显示的地方。大部分浏览器只能把表格标题显示在表格的上方或者下方,只有一些浏览器支持左边或者右边。这个就留给大家去试试了。

    使用的时候,<caption></caption>标签一定要紧接着开始的<table>标签写,如下: <ol class="code"> <li> <code><table> <br> <li class="tab1 changed"> <code><caption>Table 1: Company data</caption>

  • <tr> <br> <li class="tab2"> <code><th>Company</th>
  • <th>Employees</th>
  • <th>Founded</th>

  • <tr> <br> <li class="tab2"> <code><td>ACME Inc</td>
  • <td>1000</td>
  • <td>1947</td>

  • <tr> <br> <li class="tab2"> <code><td>XYZ Corp</td>
  • <td>2000</td>
  • <td>1973</td>
  • <th>Employees</th> <th>Founded</th> <td>1000</td> <td>1947</td> <td>2000</td> <td>1973</td>
    Table 1: Company data
    Company
    ACME Inc
    XYZ Corp

    当然你也可以用CSS去样式化表格标题。然而,要在不同浏览器里获得同样的效果还需要一定的技巧,这个也留给各位去实践了。

    表格释义:summary属性

    一般人可以很容易的决定是否研究一下表格的细节,只要瞥一眼就可以看出表格有多大、大概有什么内容。但是使用屏幕阅读器的人就不是那么容易了,除非我们给表格加上summary属性。这样可以提供比<caption></caption>标签更详细的描述。

    sumary属性的内容不会被可视化浏览器显示,所以可以尽可能的让描述足够长,使得那些用“听”的浏览者了解表格的内容。当然也不要用过头了,当有需要的时候才加上summary属性,比如对于很复杂的表格,添加一个summary属性可以使用屏幕阅读器人比较简单的了解表格的内容。

    1. <table summary="The number of employees and the foundation year of some imaginary companies."> <br> <li class="tab1"> <code><caption>Table 1: Company data</caption>
    2. <tr> <br> <li class="tab2"> <code><th>Company</th>
    3. <th>Employees</th>
    4. <th>Founded</th>

    5. <tr> <br> <li class="tab2"> <code><td>ACME Inc</td>
    6. <td>1000</td>
    7. <td>1947</td>

    8. <tr> <br> <li class="tab2"> <code><td>XYZ Corp</td>
    9. <td>2000</td>
    10. <td>1973</td>

    缩写表头:abbr属性

    当屏幕阅读器遇到一个表格,每一行会把表头连每一个数据单元格一起读出来。如果表头很长,听一遍一遍的读是十分乏味的。通过使用abbr属性,可以给那些长的表头提供简写形式,取代表头的内容。abbr属性是可选的,大部分情况表头还是(或许是应该)比较简短的。

    稍微修改一下刚才的表格,让表头更长些,abbr属性就可以这样用:

    1. <table summary="The number of employees and the foundation year of some imaginary companies."> <br> <li class="tab1"> <code><caption>Table 1: Company data</caption>
    2. <tr> <br> <li class="tab2 changed"> <code><th abbr="Company">Company Name</th>
    3. <th abbr="Employees">Number of Employees</th>
    4. <th abbr="Founded">Foundation Year</th>

    5. <tr> <br> <li class="tab2"> <code><td>ACME Inc</td>
    6. <td>1000</td>
    7. <td>1947</td>

    8. <tr> <br> <li class="tab2"> <code><td>XYZ Corp</td>
    9. <td>2000</td>
    10. <td>1973</td>
    <th abbr="Employees">Number of Employees</th> <th abbr="Founded">Foundation Year</th> <td>1000</td> <td>1947</td> <td>2000</td> <td>1973</td>
    Table 1: Company data
    Company Name
    ACME Inc
    XYZ Corp

    对于第一行数据,屏幕阅读器会读表头的全称,而从第二行开始即使用简称。

    这样让数据表格适应布局是挺困难的,而以下的做法更为常见:即让表头尽可能的短,或者简写,使用title属性或者<abbr></abbr>标签提供一个更长的说明。

    把表头和数据联系起来:scopeidheaders属性

    就我用到现在,很多表格要比上面提供的例子复杂的多。让例子复杂一点,我会移去“Company”表头,并且把第一列的数据移到表头单元格里:

    1. <table summary="The number of employees and the foundation year of some imaginary companies."> <br> <li class="tab1"> <code><caption>Table 1: Company data</caption>
    2. <tr> <br> <li class="tab2 changed"> <code><td></td>
    3. <th>Employees</th>
    4. <th>Founded</th>

    5. <tr> <br> <li class="tab2 changed"> <code><th>ACME Inc</th>
    6. <td>1000</td>
    7. <td>1947</td>

    8. <tr> <br> <li class="tab2 changed"> <code><th>XYZ Corp</th>
    9. <td>2000</td>
    10. <td>1973</td>
    <th>Employees</th> <th>Founded</th> <td>1000</td> <td>1947</td> <td>2000</td> <td>1973</td>
    Table 1: Company data
     
    ACME Inc
    XYZ Corp

    在这个表格里,每一个数据单元格都有两个表头。最简单的方法让那些非可视的浏览器理解这个表格,就是为每个表头添加一个scope属性。

    1. <table summary="The number of employees and the foundation year of some imaginary companies."> <br> <li class="tab1"> <code><caption>Table 1: Company data</caption>
    2. <tr> <br> <li class="tab2"> <code><td></td>
    3. <th scope="col">Employees</th>
    4. <th scope="col">Founded</th>

    5. <tr> <br> <li class="tab2 changed"> <code><th scope="row">ACME Inc</th>
    6. <td>1000</td>
    7. <td>1947</td>

    8. <tr> <br> <li class="tab2 changed"> <code><th scope="row">XYZ Corp</th>
    9. <td>2000</td>
    10. <td>1973</td>

    Scope属性同时定义了行的表头和列的表头:

    • col: 列表头
    • row: 行表头

    在第一行的

    加上值为colscope属性,声明他们是下面数据单元格的表头。同样的,给每行的开头<th>加上值为<code>rowscope属性声明他们是右边数据单元格的表头。

    Scope属性还有两个值:

    • colgroup: 定义列组(column group)的表头信息
    • rowgroup: 定义行组(row group)的表头信息

    一个列组是由<colgroup></colgroup>标签定义的。行组则是由<thead>、<code><tfoot>和<code><tbody>定义的。稍后我将会详细介绍它们。 <p>如果你既想要保留“Company”表头,而又想让公司名字作为行表头(row headers)显示,你会怎么做?那样的话,应该使得包含公司名字的单元格同时提供表头和数据信息。也就是说,<code><td>标签也应该加上<code>scope属性:

    1. <table summary="The number of employees and the foundation year of some imaginary companies."> <br> <li class="tab1"> <code><caption>Table 1: Company data</caption>
    2. <tr> <br> <li class="tab2 changed"> <code><th scope="col">Company</th>
    3. <th scope="col">Employees</th>
    4. <th scope="col">Founded</th>

    5. <tr> <br> <li class="tab2 changed"> <code><td scope="row">ACME Inc</td>
    6. <td>1000</td>
    7. <td>1947</td>

    8. <tr> <br> <li class="tab2 changed"> <code><td scope="row">XYZ Corp</td>
    9. <td>2000</td>
    10. <td>1973</td>

    这样的话可视化浏览器不会默认的把company name显示为表头。所以需要用CSS来修正一下,就刚才那个例子,我使用了下面的CSS:

    1. td[scope] {
    2. font-weight:bold;
    3. }

    要注意上面的规则使用了属性选择符,IE是不支持的。而通过添加一个class来样式化表头是个不错的办法。

    <th scope="col">Employees</th> <th scope="col">Founded</th> <td>1000</td> <td>1947</td> <td>2000</td> <td>1973</td>
    Table 1: Company data
    Company
    ACME Inc
    XYZ Corp

    另一个连接表格数据单元格和表头的方法就是给每一个表头添加一个唯一的ID。然后为下面的数据单元格添加headers属性,这个headers属性值包含用空格分开的各个ID,这些ID代表的表头各自关联到该数据单元格上。这样做很复杂,只是当有超过两个表头的单元格才用。在复杂的和不规则的表格中,scope属性就力不从心了。

    为了演示,我修改了一下表格,加上了公司雇员性别及人数:

    1. <table class="extbl" summary="The number of employees and the foundation year of some imaginary companies."> <br> <li class="tab1"> <code><caption>Table 1: Company data</caption>
    2. <tr> <br> <li class="tab2 changed"> <code><td rowspan="2"></td>
    3. <th id="employees" colspan="2">Employees</th>
    4. <th id="founded" rowspan="2">Founded</th>

    5. <tr> <br> <li class="tab2 changed"> <code><th id="men">Men</th>
    6. <th id="women">Women</th>

    7. <tr> <br> <li class="tab2 changed"> <code><th id="acme">ACME Inc</th>
    8. <td headers="acme employees men">700</td>
    9. <td headers="acme employees women">300</td>
    10. <td headers="acme founded">1947</td>

    11. <tr> <br> <li class="tab2 changed"> <code><th id="xyz">XYZ Corp</th>
    12. <td headers="xyz employees men">1200</td>
    13. <td headers="xyz employees women">800</td>
    14. <td headers="xyz founded">1973</td>
    <th id="employees" colspan="2">Employees</th> <th id="founded" rowspan="2">Founded</th> <th id="women">Women</th> <td headers="acme employees men">700</td> <td headers="acme employees women">300</td> <td headers="acme founded">1947</td> <td headers="xyz employees men">1200</td> <td headers="xyz employees women">800</td> <td headers="xyz founded">1973</td>
    Table 1: Company data
     
    Men
    ACME Inc
    XYZ Corp

    你可以发现,这种方法真的很麻烦,所以如果可能的话,还是尽量用scope属性吧。

    跨行和跨列

    在以前用表格布局的年代,rowspan属性和colspan属性常被用来让单元格跨几列或跨几行,来布局那些经过整齐切割的图像。这两个属性现在还在用, 因为并没有CSS来控制单元格的跨行和跨列。仔细想想,其实是很有道理的:跨行和跨列示表格结构(structure)的一部分,而不是其表现(presentation)。

    列和列组:<col><colgroup></colgroup>

    HTML提供了<colgroup></colgroup><col>标签来为相关的表格列分组。这样就可以(在一些浏览器中)使用CSS来单独的为列样式化。列组也可以使用scope属性来标明其表头信息。

    这就是我要说的关于列和列组的全部。更多信息参考“其他”部分。

    行组: <thead>, <code><tfoot>, 和<code><tbody> <p>表格的行可以分组为表头组(<code><thead>), 表尾(或表注)组(<code><tfoot>), 然后是一个或多个表身(<code><tbody>) 。每一个行组必须包含一个或多个表格行。 <p>如果一个表格包含<code><thead>,那么它必须出现在<code><tfoot>和<code><tbody>之前。而<code><tfoot>则必须出现在<code><tbody>之前。如果没有使用<code><thead>和<code><tfoot>,那么<code><tbody>标签也可以不加(也不是非得不加,随你喜欢了)。一个有行组的表格结构看起来如下: <ol class="code"> <li> <code><table> <br> <li class="tab1"> <code><thead> <br> <li class="tab2"> <code><tr></tr>

  • … 更多表头的行

  • <tfoot> <br> <li class="tab2"> <code><tr></tr>
  • … 更多表尾的行

  • <tbody> <br> <li class="tab2"> <code><tr></tr>
  • … 第一个<tbody>的行<br> <li class="tab1"><code>

  • <tbody> <br> <li class="tab2"> <code><tr></tr>
  • … 第二个<tbody>的行<br> <li class="tab1"><code>

  • … 更多的<tbody> <li><code>
  • 使用行组有以下几个原因:

    • 这样样式化表头、表尾和表身比较方便,而且独立,不必要给每个标签加样式或class。
    • 当打印比较长的表格的时候,一些浏览器(比如基于Mozilla的)会在每一页的开头重复表头和表尾的内容,这样阅读打印版本的表格就比较方便。
    • 区分开表头和表尾也可以使一些浏览器浏览表格的时候,只滚动表身。

    仅为数据表格而写

    本文所写的所有都是关于使用HTML表格来组织和表现数据。如果你还是想用表格来布局,那么上文所述的都没有意义而且用不到。没有summary属性、没有表头、没有<caption></caption>、什么都没有,没有格式,陈旧的布局表格除了<table>,<code><tr>,<code><td>什么都可以不要。另外还要承担风险,即如何面对那些非可视的用户代理(UA)。 <p><strong>优势</strong></p> <p>看来要用HTML做一个有语义化的数据表格有很多工作。对于复杂的表格是这样的。有时候基本上是不可能手工写出来的。但是对于简单的表格,那么使用一个<code><th>加上<code>scope属性就可以了,又快又简单。

    非常明显,语义化的表格对于使用屏幕阅读器或其他辅助技术的浏览者非常有好处。让那些巨大而复杂的表格“听”起来很有意义是非常困难的,所以尽可能的使表格简单。

    또한 시각적 브라우저를 사용하는 디자이너와 사용자에게도 도움이 됩니다. 의미 테이블에는 CSS를 사용하여 스타일을 지정할 수 있는 많은 인터페이스가 있으며, 좋은 스타일은 테이블을 더 쉽게 사용할 수 있도록 해줍니다.

    기타

    이 기사 외에도 데이터 테이블에 대한 추가 콘텐츠가 있습니다. 예를 들어 여기서는 axis 속성이 언급되지 않았고, <colgroup></colgroup>, <col>에 대한 설명도 그다지 깊지 않습니다. 서식, 스타일 또는 border 모델을 자세히 다루지 않았으며 여전히 정말 복잡한 테이블의 예가 부족합니다.

    자세한 내용은 다음 기사를 참조하세요.

    성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    @keyframes 및 @Media와 같이 @Rules는 얼마나 많은 특이성을 가지고 있습니까?@keyframes 및 @Media와 같이 @Rules는 얼마나 많은 특이성을 가지고 있습니까?Apr 18, 2025 am 11:34 AM

    나는 다른 날이 질문을 받았다. 나의 첫 번째 생각은 : 이상한 질문입니다! 특이성은 선택기에 관한 것이며 At-Rules는 선택기가 아니므로 ... 무의미합니까?

    @Media 및 @Support 쿼리를 중첩 할 수 있습니까?@Media 및 @Support 쿼리를 중첩 할 수 있습니까?Apr 18, 2025 am 11:32 AM

    그렇습니다. 당신은 할 수 있습니다. 그리고 그것은 실제로 어떤 순서로 중요하지 않습니다. CSS 전 처리기가 필요하지 않습니다. 일반 CSS에서 작동합니다.

    빠른 Gulp 캐시 파열빠른 Gulp 캐시 파열Apr 18, 2025 am 11:23 AM

    CSS 및 JavaScript (및 이미지 및 글꼴 등)와 같은 자산에 멀리 떨어진 캐시 헤더를 설정해야합니다. 브라우저를 알려줍니다

    CSS의 품질과 복잡성을 모니터링하는 스택을 찾아CSS의 품질과 복잡성을 모니터링하는 스택을 찾아Apr 18, 2025 am 11:22 AM

    많은 개발자들은 CSS 코드베이스를 유지하는 방법에 대해 글을 썼지 만 코드베이스의 품질을 어떻게 측정하는지에 대해 많은 글을 쓰지 않습니다. 물론, 우리는 가지고 있습니다

    Datalist는 가치를 시행하지 않고 값을 제안하는 것입니다Datalist는 가치를 시행하지 않고 값을 제안하는 것입니다Apr 18, 2025 am 11:08 AM

    짧고 임의의 텍스트를 수락 해야하는 양식이 있습니까? 이름이나 다른 것 같습니다. 정확히 무엇을위한 것입니다. 많은 것이 있습니다

    취리히에서 열린 전면 회의취리히에서 열린 전면 회의Apr 18, 2025 am 11:03 AM

    나는 프론트 컨퍼런스를 위해 스위스 취리히로 향하게되어 매우 기쁩니다 (그 이름과 URL을 사랑합니다!). 나는 전에 스위스에 가본 적이 없기 때문에 나는 흥분했다

    CloudFlare Workers와 함께 풀 스택 서버리스 애플리케이션 구축CloudFlare Workers와 함께 풀 스택 서버리스 애플리케이션 구축Apr 18, 2025 am 10:58 AM

    소프트웨어 개발에서 제가 가장 좋아하는 개발 중 하나는 서버리스의 출현이었습니다. 세부 사항에 푹 빠지는 경향이있는 개발자로서

    NUXT 응용 프로그램에서 동적 경로 생성NUXT 응용 프로그램에서 동적 경로 생성Apr 18, 2025 am 10:53 AM

    이 게시물에서는 들어오는 데이터를 위해 동적 경로를 만드는 방법을 보여주기 위해 NetLify에 구축하고 배포 한 전자 상거래 상점 데모를 사용합니다. 상당히입니다

    See all articles

    핫 AI 도구

    Undresser.AI Undress

    Undresser.AI Undress

    사실적인 누드 사진을 만들기 위한 AI 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    AI Hentai Generator

    AI Hentai Generator

    AI Hentai를 무료로 생성하십시오.

    뜨거운 도구

    MinGW - Windows용 미니멀리스트 GNU

    MinGW - Windows용 미니멀리스트 GNU

    이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

    DVWA

    DVWA

    DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

    SecList

    SecList

    SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

    메모장++7.3.1

    메모장++7.3.1

    사용하기 쉬운 무료 코드 편집기