コンテンツ
- HTMLでテーブルを作成する
- ステップ1
- ステップ2
- ステップ3
- ステップ4
- 手順5
- カレンダーをカスタマイズする
- ステップ1
- ステップ2
- theadカレンダー{
- ステップ3
- 番目のカレンダー、
- tdカレンダー{
- ステップ4
- tdスパンカレンダー{
テーブルは、Webページレイアウトの構築に関しては支持されなくなっていますが、HTMLカレンダーのコーディングには依然として有効です。カレンダーは、たとえば、曜日などの名前が付けられた列を持つ日付のグリッドに編成されているため、表形式のデータを表示します。追加のCSSコードにより、名前と番号を含む面倒なグリッドがカレンダーのようになります。カレンダーのイベントには、日付の数とイベントの両方にスペースが必要なので、CSSを使用して、両方の情報を読みやすくする方法で日付をフォーマットする必要があります。
HTMLでテーブルを作成する
ステップ1
カレンダーを構成するテーブルを作成します。このテーブルには、曜日ごとに1つずつ、7つのセルを持つヘッダーが必要です。通常のテーブルセルの6つの行を作成することも必要です。メモ帳またはコードエディタを使用して、抜粋をコピーしてWebページに貼り付けます。
| 日曜日 | 月曜 | 火曜日 | 水曜日 | 木曜日 | 金曜日 | 土曜日 |
|---|
このコードはテーブルとタイトルを作成します。 Webサイトが他のページのテーブルを使用する場合に備えて、テーブルは「カレンダー」と呼ばれる識別名を使用します。
ステップ2
""タグの下にbodyタグのペアを追加します。
ステップ3
次のコードをコピーして、「
" 6回：このコードは、7つのセルを含む各行を作成します。そのため、それらの6つを追加することにより、カレンダーは、年のすべての月に必要なすべてのデータスペースを持つことになります。
ステップ4
表示したい月に従って、カレンダーに日付を追加します。実際のカレンダーを調べて、日付をスキップしたり繰り返したりしないように注意してください。各日付を「」タグで囲み、後で数値をカスタマイズできるようにします。
手順5
関連する日付を含むセルのイベントに注意してください。イベントは「」タグの外側で、「」の内側にある必要があります
’:
ハロウィーンパーティー！
登録最終日。
カレンダーをカスタマイズする
ステップ1
「
アウトラインはオプションですが、これは現在のWebページのテーブルにボーダーを追加する最も適切な方法です。
ステップ2
文字の色と背景の色でテーブルのタイトルをカスタマイズします。
theadカレンダー{
色：#ffffff;背景色：ダークブルー; font-weight：太字; }
16進コードまたは色の名前を使用できます。このタイトルは、ネイビーブルーの背景に白いテキストを表示します。
ステップ3
表のセルを基準にした塗りつぶし、境界線、幅、および位置：
番目のカレンダー、
tdカレンダー{
パディング：20px;ボーダー：1px黒一色;幅：100px;位置：相対; }
相対配置により、プログラマーは後で日付を表のセルの隅に数字の形で配置できます。高さを設定しないでください。日付に追加できるテキストの量が制限されます。
ステップ4
塗りつぶし、背景色、絶対位置を使用して数値を作成します。
tdスパンカレンダー{
font-weight：太字;位置：絶対;下：0;右：0;表示ブロック;パディング：5px; background-color：#eeeeee; }
タグ「」をWebページのボックスとして機能させるには、「display：block」を含める必要があります。そうしないと、タグを埋めることができません。このサンプルコードは、各日付スペースの左下隅にかすかな灰色のボックスを作成し、日付番号を表示します。