在網頁制作過程中,表格是經常使用的元素之一。而有時候我們需要把表格居中顯示,通過CSS可以輕松實現該效果。
首先,在HTML中需給表格添加一個id或class值,以便CSS可以調用該元素。如下所示:
<table id="myTable"> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> <tr> <td>小明</td> <td>18</td> <td>男</td> </tr> <tr> <td>小紅</td> <td>19</td> <td>女</td> </tr> </tbody> </table>接著,在CSS中使用以下代碼實現居中顯示:
#myTable { margin: 0 auto; }代碼中的"0"表示上下邊距為0,"auto"表示水平居中。這樣,在瀏覽器中打開網頁,表格就會自動居中。 需要特別注意的是,對于該方法只適用于block元素,對于inline的表格,該方法不起作用。 最后,代碼和段落在網頁中雖然不需要居中顯示,但為了方便查看和閱讀,我們可以分別在代碼和段落標簽外添加"pre"和"p"標簽。如下所示:
<pre><code>這里寫代碼</code></pre> <p>這里寫段落</p>以上就是實現網頁表格居中顯示的方法,希望對您有所幫助。
下一篇css 怎么控制塊位置