用於瀏覽器檢測的HTML表格顯示

我剛剛發現了一個網站http://www.browser-details.com/browser-detection/，它顯示了用戶計算機系統的一些細節。用於瀏覽器檢測的HTML表格顯示

當我學習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>

請糾正我，如果我錯了。提前致謝。

來源

2013-03-31 user2201935

直到最近我使用的表，而不是div的我的佈局，主要是因爲1999年我學會了HTML，然後進入軟件工程，並沒有需要跟上現代網頁設計技術，所以就您使用表格的權利而言，請繼續！我學會了如何正確使用div並查看該頁面，以及您已經在代碼中使用div的事實，您可能會考慮使用div，特別是如果您只是在學習表格（第一次學習正確，而不是等待我）但如果你仍然想爲自己的理由學習表，請告訴我們。 – BillyNair

至於表結構本身，不需要將表格內的表格包裝在div中，它看起來像你試圖做的所有嵌套表格都可以在TR和TD中結合針對TD的CSS來完成爲背景顏色。你想成爲怎樣的「正確」？這僅僅是用於HTML驗證還是你想用它作爲投資組合？ – BillyNair

我還想學習表格 – user2201935

您可以將表減少這樣的事情

<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-31 10:40:50 BillyNair

非常感謝你比利 – user2201935

您可以使用W3C validator檢查代碼的有效性。

來源

2013-03-31 09:49:04

用於瀏覽器檢測的HTML表格顯示

回答

相關問題