Question

我刚刚找到一个网站http://www.browser-details.com/browser-detection/，其中显示了用户计算机系统的一些细节。

当我正在学习HTML表格显示时，我尝试通过HTML类似地显示上述网站。我非常确定这不是检索和显示上述网站等信息的确切代码，但我只想确认我编写HTML代码的方式是否合适。

这是我的代码示例，用于显示详细信息：

<!DOCTYPE html>
<html>
<table width="100%">

<tr>
<td>
<div style="background-color:red;">
<table align="center">
<th>Browser</th>
</table>
<div style="background-color:blue;">
<table align="center">
<td>
Slim Browser
</td>
</table>
</div>
</div>
</td>

<td>
<div style="background-color:red;">
<table align="center">
<th>Operating System</th>
</table>
<div style="background-color:blue;">
<table align="center">
<td>
Windows 7
</td>
</table>
</div>
</div>
</td>

<td>
<div style="background-color:red;">
<table align="center">
<th>IP Address</th>
</table>
<div style="background-color:blue;">
<table align="center">
<td>
117.85.48.222
</td>
</table>
</div>
</div>
</td>
</tr>

<tr>

<td>
<div style="background-color:red;">
<table align="center">
<th>JavaScript</th>
</table>
<div style="background-color:blue;">
<table align="center">
<td>
Enabled
</td>
</table>
</div>
</div>
</td>

<td>
<div style="background-color:red;">
<table align="center">
<th>Cookies</th>
</table>
<div style="background-color:blue;">
<table align="center">
<td>
Enabled
</td>
</table>
</div>
</div>
</td>

<td>
<div style="background-color:red;">
<table align="center">
<th>Color Depth</th>
</table>
<div style="background-color:blue;">
<table align="center">
<td>
24
</td>
</table>
</div>
</div>
</td>

</tr>

</table>
</html>

如果我错了，请纠正我。提前致谢。

Answer 1

您可以使用W3C validator检查代码的有效性。

Answer 2

您可以将表格缩小为此类

<table>
<tr>
    <th>
        Operating System
    </th>
    <th>
        Operating System
    </th>
    <th>
        Operating System
    </th>
</tr>
<tr>
    <td>
        Windows 7
    </td>
    <td>
        Windows 7
    </td>
    <td>
        Windows 7
    </td>
</tr>


<tr>
    <th>
        Operating System
    </th>
    <th>
        Operating System
    </th>
    <th>
        Operating System
    </th>
</tr>
<tr>
    <td>
        Windows 7
    </td>
    <td>
        Windows 7
    </td>
    <td>
        Windows 7
    </td>
</tr>

我没有重新键入所有文本，而是复制了单元格。

您的CSS可能如下所示：

table{
    width:100%;
    border:3px;
    border-collapse:separate;
    border-spacing:30px 0px;    
}
th{
    background-color:#888;
    text-align:left;
    padding-left:1em;
    border-top: 1em solid #fff;
}

td{
    background-color:#eee;
    text-align:left;
    padding:1em 2em 1.5em 2em;
}

用于浏览器检测的HTML表格显示

2 个答案: