Question

我像这样创建表。

<table border="1">
            <tr>
                <td width="250px" rowspan="2"><input type="image" src="dash.jpg"  name="image" style=width:50% height="100"> </td>
                <td width="1100px" align="center" valign ="top"><div id="head1" style="font-size: 55px;letter-spacing:3px">Sample programming html</div></td>
                <td width="300px" align="center" valign ="top"><span id="subhead1" style="font-size: 25px;letter-spacing:3px">Chap: <label id = "l1"  style = "color:white;font:normal 22px chalkdust;">1</label></span><br>
                    <span id="subhead2" style="font-size: 30px;letter-spacing:3px"> <input type="text" id="text2" disabled="disabled" value="0" style= "color: #fff; font-size: 18pt;"/> -  POINT</span>
                </td>
            </tr>
            <tr>
                <td  colspan="3" align="center" style="position: relative;" valign ="top">
                    <div id="head2" style="font-size: 25px;letter-spacing:4px">1-COORDINATE GRID</div></td>
            </tr>
            <tr><td colspan="3" align="center"><hr id="line" color="#fff" size="2" width="75%"></td></tr>
        </table>

我希望内容为“Sample programming html”，“1-COORDINATE GRID”正好与内容的中心相对应。我使用各种代码，但它并没有完全符合“示例编程html”的中心。任何人都可以帮助解决这个问题。

Answer 1

您的td单元格宽度不同，如果您想自己调整文本对齐方式，可能会使用左边或右边填充css属性。

<div id="head2" style="padding-left:250px..../>

Answer 2

只需从行中删除colspan =“3”即可获得对齐。

<tr>
            <td  align="center" style="position: relative;" valign ="top">
                <div id="head2" style="font-size: 25px;letter-spacing:4px">1-COORDINATE GRID</div></td>
</tr>

在html中调整表td的内容

2 个答案: