重新定位html中的表格中的文本

我有一個基本的html表格。我試圖在4個樹列的中心對齊「樹」。無論我輸入到我的保證金中的數字是多少，它似乎都不再是正確的。我究竟做錯了什麼？重新定位html中的表格中的文本

<!DOCTYPE html> 

<!--2.10--> 
<html lang="en"> 
<head> 
<title> Trees </title> 
<meta charset = "utf-8"/> 
<style> 
.center { 
    margin: 0px 10px 0px 25px; 
    width: 30%; 
    border:3px solid #8AC007; 
    padding: 1px; 
} 

</style> 
</head> 

<body> 
<table style="width:25%"> 
    <caption>Tree Properties</caption> 
    <tr> 
     <td rowspan = "6">Characteristics </td> 
     <th colspan = "5"> <div class = "center"> Tree </div> </th> 
    </tr> 
    <tr> 
     <th> </th> 
     <th> Pine </th> 
     <th> Maple </th> 
     <th> Oak </th> 
     <th> Fir </th> 
    </tr> 
    <tr> 
     <th> Average Height(ft) </th> 
     <td> 100 </td> 
     <td> 80 </td> 
     <td> 90 </td> 
     <td> 220 </td> 
    </tr> 
    <tr> 
     <th> Average Width(ft)</th> 
     <td> 2.2 </td> 
     <td> 2 </td> 
     <td> 26 </td> 
     <td> 5 </td> 
    </tr> 
    <tr> 
     <th> Typical Life Span(yrs) </th> 
     <td> 0 </td> 
     <td> 0 </td> 
     <td> 0 </td> 
     <td> 0 </td> 
    </tr> 
    <tr> 
     <th> Leaf Type </th> 
     <td> 0 </td> 
     <td> 0 </td> 
     <td> 0 </td> 
     <td> 0 </td> 
    </tr> 
</table>

來源

2015-09-17 toshbar

將您的保證金從margin: 0px 10px 0px 25px;更改爲margin:auto;。然後添加一個th並按如下所示更改colspan和columns。

<tr> 
    <td rowspan = "6">Characteristics </td> 
    <th></th> 
    <th colspan = "4"> <div class = "center">Tree</div> </th> 
</tr>

來源

2015-09-17 02:46:24

夠公平的，但他想要在樹中間的盒子而不是整個桌子。你可以把它排除，如果它不是語義 – Tasos

啊，我編輯我的答案。由於該列無論如何都是標題。 –

一個做

演示

https://jsfiddle.net/02r7fwr5/

的CSS

方式

.center { 
    display:inline-block; 
    width: 30%; 
    border:3px solid #8AC007; 
    padding: 1px; 
    margin-right:-27%; 
}

來源

2015-09-17 02:11:06 Tasos

這不是語義html使用錨標籤來居中的東西。應該使用margin：auto; –

看起來更好。 –

重新定位html中的表格中的文本

回答

相關問題