0

我正在使用 Cobalt 8 CMS，以前的文章布局非常简单地由表格设计。

我在下面添加了一个示例。转换所有表格（并学习如何）的想法令人生畏，但我想做最好的事情。表格字段显示提交表单的结果。多行和多列的混合，以及两者的一些跨越。

我现在也在使用 Joomla 3，所以也许 divs 是更好的选择。

我很感激你的建议，

例子：

<table id='display' width=648 border=0 summary="">
    <tr>
        <td rowspan=7 width=228><?php echo $item->fields_by_id[3]->result; ?></td>
        <td width=200><b>Author:</b></td>
        <td width=220><?php echo $item->fields_by_id[1]->result; ?></td>
    </tr>
    <tr>
        <td width=200><b>Publisher:</b></td>
        <td width=220><?php echo $item->fields_by_id[2]->result; ?></td>
    </tr>
    <tr>
        <td width=200><b>Genre:</b></td>
        <td width=220><?php echo $item->fields_by_id[9]->result; ?></td>
    </tr>
    <tr>
        <td width=200><b>CRR Heat Rating:</b></td>
        <td width=220 width=420><?php echo $item->fields_by_id[11]->result; ?></td>
    </tr>
    <tr>
        <td colspan=2 width=420><?php echo $item->fields_by_id[12]->result; ?>
</td>
    </tr>
    <tr>
        <td colspan=2 width=420><?php echo $item->fields_by_id[10]->result; ?>
</td>
    </tr>
    <tr>
        <td colspan=2 width=420><?php echo $item->fields_by_id[13]->result; ?>
</td>
    </tr>
    <tr>
        <td colspan=3 width=648><?php echo $item->fields_by_id[4]->result; ?></td>
    </tr>
    <tr>
        <td colspan=3 width=648><?php echo $item->fields_by_id[5]->result; ?></td>
    </tr>
</table>
4

4 回答 4

2

简短版：表格应该只用于显示数据，如果您将其用于布局目的，屏幕阅读器可能无法在页面中导航。

长版：

表格元素以表格的形式表示具有多个维度的数据。表格不应用作布局辅助工具。从历史上看，许多 Web 作者使用 HTML 格式的表格来控制他们的页面布局，这使得从此类文档中提取表格数据变得困难。特别是，辅助工具（如屏幕阅读器）的用户可能会发现使用用于布局的表格导航页面非常困难。如果要将表格用于布局，则必须使用属性 role="presentation" 标记，以便用户代理正确地将表格表示为辅助技术，并将作者的意图正确传达给希望提取表格的工具文档中的数据。

http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#the-table-element

于 2013-09-29T07:31:04.350 回答
2

表格用于表格数据 - 不是演示文稿。

因此，您示例中的数据不是表格的。所以使用 CSS

于 2013-09-29T06:39:00.260 回答
0

你这样做的这种方式非常过时。我认为你应该使用 div。如果您要展示几本书，那么这将有利于表格布局。

另外，我认为您应该尝试在所有属性值周围加上引号。这是一个基本的好习惯。

于 2013-09-29T06:44:59.197 回答
0

使用跨度的行和列的数量，使其成为使用 Table 的有效选择。我一直面临div的问题。

于 2013-09-29T06:41:04.173 回答