序章
このチュートリアルでは、HTMLテーブルとCSSクラスを使用して、デモンストレーションWebサイトの「雇用」セクション(または4番目のセクション)を再作成します。 サイズをパーソナライズしたい場合は、サミーの情報を自分の情報に自由に切り替えてください。 ここで使用するメソッドは、他のCSS /HTMLWebサイトプロジェクトに適用できます。
このセクションを作成するには、セクション見出しを追加してスタイルを設定し、幅の広い列を追加してスタイルを設定し、列内にHTMLテーブルを追加してスタイルを設定します。
前提条件
このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。
セクション区切りとセクションタイトルの作成
開始するには、前の「プロジェクト」セクションのコンテンツとこの「雇用」セクションのコンテンツの間にスペースを追加するクラスを作成します。 次のCSSコメントとCSSルールセットを下部に追加します styles.css
ファイル:
. . .
/* Section 4 */
/* Add space between sections */
.section-break {
margin:50px;
height:500px;
}
このコードスニペットには、「セクション4」のCSSルールセットにラベルを付けるCSSコメントと、その目的を説明するCSSコメントを追加しました。 section-break
クラス。 このクラスを空に割り当てます <div>
の中に index.html
ファイル。高さは500ピクセル、マージンは50ピクセルになります。 でも <div>
は非表示になり、その高さは、後続のコンテンツをページの500ピクセル下にプッシュすることにより、セクションブレークとして機能します。
あなたに戻る index.html
ファイルを作成し、次のコードスニペットを追加します。
. . .
<!--Section 4: Employment—>
<div class="section-break"> </div>
<h2 class="section-heading">Experience</h2>
このコードスニペットは、Webサイトの4番目のセクションで使用されるHTMLコードにラベルを付けるためのHTMLコメントを追加し、 <div>
割り当てられたコンテナ section-break
作成したばかりのクラス。 コードスニペットは、「Experience」セクションの見出しを追加し、クラスを使用してスタイルを設定します section-heading
前のチュートリアル[CSSを使用してタイルレイアウトを作成する方法]( how-to-build-a-tiled-layout-with-css-section-3 )で作成したもの。
注:このチュートリアルシリーズをフォローしていない場合は、 section-heading
あなたのクラスに styles.css
次のコードスニペットをファイルの下部に追加してファイルを作成します。
. . .
.section-heading {
text-align:center;
color:#102C4E;
margin-top: 150px;
margin-bottom:70px;
font-size: 35px;
}
あなたの index.html
ファイルを作成し、ブラウザにロードします。 これで、セクション区切りの後に「Experience」という名前のセクション見出しが表示されます。
幅の広い列とテーブルのスタイリング
次に、幅の広い白い列とその中に配置するテーブルのスタイルを設定できるクラスを作成します。 の下部に次のコードスニペットを追加します styles.css
ファイル:
. . .
/* Wide column */
.column-1 {
width: 90%;
height: auto;
padding-top:70px;
padding-left:70px;
padding-bottom:70px;
margin:auto;
margin-bottom:50px;
margin-top: 75px;
background-color:white;
}
/* Table formatting */
.table-style {
width:100%;
border-spacing: 24px;
}
最初のルールセットでは、クラスのいくつかのスタイルルールを宣言しました column-1
. 指定したことに注意してください width
ビューポートの幅に応じて列のサイズが変わるように、パーセンテージで表示します。 指定しました height
に auto
、これにより、テーブルは、内部に配置するHTMLコンテンツの高さのニーズに応じて高さを調整できます。 また、背景色を作成するルールを作成しました <div>
このクラスを割り当てました white
.
このルールセットの他の宣言について詳しく知りたい場合は、コンテンツ、パディング、およびマージン[のサイズの設定に関するこのチュートリアルシリーズの前のセクションを確認してください。 X207X]。
2番目のルールセットでは、クラスを定義しました table-style
そして、いくつかのルールを宣言しました。 The width:100%
宣言により、テーブルの幅は、テーブルが配置されているコンテナの幅全体を占めるようになります。これは、作成する幅の広い列になります。 The border-spacing:24px;
宣言により、テーブルのセル間に24ピクセルのスペースが配置され、テーブルのコンテンツが列の幅を占めるようになります。 このルールを含めなかった場合、各テーブルセルは非常に近くなります。
列とテーブルの追加
次に、列とテーブルをHTMLファイルに追加します。 あなたの styles.css
ファイル、に戻る index.html
ファイルを作成し、コードのHTML行のすぐ下に次のコードスニペットを追加します <h2 class="section-heading">Experience</h2>
:
. . .
<div class="column-1">
<h2>Employment</h2>
<table class="table-style">
<tr>
<td>Freelance designer</td>
<td>Seven Seas</td>
<td>2015-present</td>
</tr>
<tr>
<td>Associate Sea Creature</td>
<td>Small Pond Productions</td>
<td>2019-2020</td>
</tr>
<tr>
<td>Associate Surfer</td>
<td>Open Watery Web</td>
<td>2018-2019</td>
</tr>
<tr>
<td>Open Web Advocate</td>
<td>Kiddie Pool Kubernetes</td>
<td>2017-2018</td>
</tr>
<tr>
<td>Assistant Shark</td>
<td>Small Pond Pictures</td>
<td>2016-2017</td>
</tr>
</table>
</div>
</div>
このコードスニペットでは、 <div>
に従ってスタイル設定されたコンテナ column-1
クラスを作成し、HTMLテーブルを内部に配置します。 table-style
クラス。 テーブル内に、雇用履歴コンテンツを配置しました。 The <tr>
タグはテーブル行を開きます。ここで、次の3セットのテーブルデータ( <td>
タグ)が挿入されます。 HTMLテーブルの仕組みの詳細については、チュートリアルHTMLを使用してテーブルを作成する方法をご覧ください。
両方のファイルを保存し、ブラウザでWebページをリロードします。 これで、このチュートリアルの冒頭に示したように、Webページに4行3列のテーブルを含む1つの幅の列が表示されます。
最初の3つに注意してください <td>
要素は、の最初の開始セットと終了セットの間に挿入されます <tr>
タグ。 同じテーブルの行とデータ形式を使用して行を追加し続けることができ、設定したので列の高さはそれに応じて調整されます height
に auto
のために column-1
クラス。 または、追加して列を追加できます <td>
内部の要素 <tr>
行。
結論
これで、CSSを使用してテーブルを作成およびスタイル設定し、構造化されたレイアウトで雇用履歴コンテンツを表示できます。 行と列のサイズ変更と追加を試して、さまざまな目的に合わせてテーブルをカスタマイズしてください。 次のチュートリアルでは、「教育」と「スキル」のテーブルを作成して、テーブルレイアウトの可能性を探り続けます。