0

我刚刚找到了一个网站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>

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

4

2 回答 2

0

您可以使用W3C 验证器检查您的代码的有效性。

于 2013-03-31T09:49:04.493 回答
0

你可以把你的桌子缩小到像这样

<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;
}
于 2013-03-31T10:40:50.740 回答