html - 表セルのオフセット

Question

ラジオボタンの 4x4 テーブルがあります。最初の行 (4x4 の上の余分な行) では、ボタンを水平方向の中央に配置したいと思います。colspan などを試しましたが、すべてが他のラジオボタンと同じように列に残っているため、中央に配置されていません。

Answer 1

必須のテーブルレス回答：

<div>
    <div class="center"><input type='button' value='hello' /></div>
    <ul class="radioList">
        <li>
            <label for="radio1">
                <input type="radio" id="radio1" />
                Checkbox 1</label>
        </li>
        <li>
            <label for="radio2">
                <input type="radio" id="radio2" />
                Checkbox 2</label>
        </li>
        <li>
            <label for="radio3">
                <input type="radio" id="radio3" />
                Checkbox 3</label>
        </li>
        <li>
            <label for="radio4">
                <input type="radio" id="radio4" />
                Checkbox 4</label>
        </li>
    </ul>   
</div>

.center { text-align:center; }
.radioList {
    list-style:none;
    width:100%;
}
.radioList li {
    float:left;
    width:25%;
}

http://jsfiddle.net/Amudt/

Answer 2

このような？CSSとtext-align:center一番上の行のルールを使用するだけです。これがjsFiddleの例です。

<table>
    <tr>
        <td colspan="4" style="text-align:center"><input type="radio" /></td>
    </tr>
    <tr>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
    </tr>
    <tr>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
    </tr>
    <tr>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
    </tr>
    <tr>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
        <td><input type="radio" /></td>
    </tr>
</table>

Answer 3

http://jsfiddle.net/EJbny/

<table style='width:100%;' border=1>
<tr>
    <td colspan=4 style='text-align:center;'><input type='button' value='hello'></td>