0

ユーザーのコンピューター システムの詳細の一部を表示する Web サイト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

テーブルを次のように減らすことができます

<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 に答える
0

コードの有効性はW3C バリデーターで確認できます。

于 2013-03-31T09:49:04.493 に答える