0

この種のテーブルを実現するにはどうすればよいですか:

ここに画像の説明を入力

スケジュール列内には、サブ列 (1 月、2 月など) があります。

中に入れてみ<th></th>ました<th></th>

しかし、それは機能していません。

私のフィドルを参照してください: http://jsfiddle.net/TAJzY/1/

4

4 に答える 4

3
  • 解決策は次colspan=""のrowspan=""とおりです。
    • colspan="12"「スケジュール/活動のマイルストーン」セルで 使用します。
      • <tr>同じ行の 12 個の空の後続セルを削除します。
    • rowspan="2"「推定予算」セルで 使用します。
      • そして、下から単一の空の最初の<th>セルを削除し<tr>ます。
  • <thead>明示的な、<tbody>、およびオプション<tfoot>のセクション を使用することを忘れないでください。
    • 明示的なセクションなしで HTML テーブルを使用することもできますが、CSS を使用して HTML テーブルのスタイルを設定する方がはるかに簡単で効果的です。Excel スタイルの「固定された」行のような手法を使用できます。これthead { position: sticky; }は、他の方法では実装が非常に困難 (または単に退屈) です。それ以外は。

ステップ1：

まず、セルの分割/結合を行わずにテーブルを作成すると、次のようになります (下の [コード スニペットを実行] ボタンをクリックしてテーブルを表示します)。

table { border: 1px outset #bbb; }
table > * > tr > * { border: 1px inset #bbb; }

thead { background-color: #7ACABD; text-align: center; }
tbody { background-color: #e0fffa; }
tfoot { background-color: #39c4ae' }
<table>
    <thead>
        <tr>
            <th>Estimated Budget</th>
            <th>Schedule/Milestone of Activities</th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <th></th>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>$123</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
         <tr>
            <td>$456</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
    </tbody>
    </table>

ステップ2：

次に、「アクティビティのスケジュール/マイルストーン」セルを残りの 12 列 (合計 13 列のうち) すべてにまたがるようにします。これは、現在セルで表されているのと同じように、colspan="12"末尾の空の<th></th>要素を削除することも意味します。<tr><th colspan="12">

table { border: 1px outset #bbb; }
table > * > tr > * { border: 1px inset #bbb; }

thead { background-color: #7ACABD; }
tbody { background-color: #e0fffa; }
tfoot { background-color: #39c4ae' }
<table>
    <thead>
        <tr>
            <th>Estimated Budget</th>
            <th colspan="12">Schedule/Milestone of Activities</th>
        </tr>
        <tr>
            <th></th>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>$123</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
         <tr>
            <td>$456</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
    </tbody>
    </table>

ステップ 3:

「推定予算」セルを<thead>追加でこれらの 2 行にまたがるようにするには、2 番目rowspan="2"の空のイニシャルも削除します(空のセルの「スロット」が前の行から取得されるため)。<th></th><tr><th><th rowspan="2">

そのようです：

table { border: 1px outset #bbb; }
table > * > tr > * { border: 1px inset #bbb; }

thead { background-color: #7ACABD; }
tbody { background-color: #e0fffa; }
tfoot { background-color: #39c4ae; }

/* Right-align budget numbers in the first column: */
table > tbody > tr > td:first-child { text-align: right; }
<table>
    <thead>
        <tr>
            <th rowspan="2">Estimated Budget</th>
            <th colspan="12">Schedule/Milestone of Activities</th>
        </tr>
        <tr>
            <th>Jan</th>
            <th>Feb</th>
            <th>Mar</th>
            <th>Apr</th>
            <th>May</th>
            <th>Jun</th>
            <th>Jul</th>
            <th>Aug</th>
            <th>Sep</th>
            <th>Oct</th>
            <th>Nov</th>
            <th>Dec</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>$123</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
         <tr>
            <td>$456</td>
            <td>j</td>
            <td>f</td>
            <td>m</td>
            <td>a</td>
            <td>m</td>
            <td>j</td>
            <td>j</td>
            <td>a</td>
            <td>s</td>
            <td>o</td>
            <td>n</td>
            <td>d</td>
        </tr>
    </tbody>
    </table>

于 2013-01-29T05:29:09.273 に答える
1

colspanSchedule で属性を使用しますth。多くの列にまたがることになります。

rowspan予算に使用するthと、行にも同じ効果があります。

于 2013-01-29T05:23:04.887 に答える
0

これを試してください（colspanの使用に注意してください）：

<table border="1">
  <tr>
    <td>budget</td>
    <td colspan="3">header</td>
  </tr>
  <tr>
    <td></td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
</table>

より複雑なテーブル レイアウトが必要な場合は、 http://blocknote.netエディターを使用できます。そこにあるテーブルエディタはかなり便利です。

于 2013-01-29T05:26:50.050 に答える
-1 
<table>
<tr>
    <td>foo</td>
    <td colspan="3">Header</td>
  </tr>
  <tr>
    <td></td>
    <td>Content</td>
    ...
  </tr>
  <tr>
    <td>foo1</td>
    <td>foo2</td>
    ...
  </tr>
</table>
于 2013-01-29T05:37:04.093 に答える