セルの分割と結合
6行のテーブルができましたが、よく見るとこれから作ろうとしているホームページは、左にサイトメニューがありますので、縦を2列に分割しなくてはなりません。
下の写真を見れわかると思うのですが、3行目が3列、4行目が2列に分割されています。
↓3行目が3列、4行目が2列に分割されていることを確認してください。
ですから、テーブルの3行目を3分割、テーブルの4行目を2分割にしなければなりません。
まず、テーブルの3行目の中をクリックして、3行目だけを指定します。
3行目だけがピンク色で囲まれればOKです。
その状態で、上部メニューの「セルの横分割」ボタンをクリックします。
↓セルの横分割ボタン
すると、3行目が2つに分割されると思います。
そのままで、もう一度「セルの横分割」ボタンをクリックして、3つに分割してください。
これで、3行目を分割することができたので、同様の方法で、4行目を2分割してください。
↓ここまでの解説を動画で見ることができます。
さらに、少し細かいのですが、左サイドメニューとメインのコンテンツの間に区切り線が入っています。
↓区切り線を確認してください。
区切り線を入れるために、一つセルが必要ですので、3行目と4行目にあと1列追加する必要があります。
まず、3行目の一番左のセルでクリックして指定し、その状態で「セルの横分割」ボタンをクリックして、さらに1列増やします。
これで、3行目は4列になったと思います。
さらに、4行目の左のセルをクリックして指定し、「セルの横分割」ボタンをクリックしてさらに1列増やします。
これで、4行目は3列になったと思います。
ただ、区切り線は、3行目と4行目にまたがって配置されていますので、3行目の左から2番目のセルと4行目の左から2番目のセルを結合する必要があります。
ですので、3行目の左から2番目のセルをクリックして指定した状態で、「下のセルと結合」ボタンをクリックします。
↓「下のセルと結合」ボタンを確認。
これでは、3行目と4行目の左から2番目のセルが結合されたと思います。
↓ここまでの解説を動画で見ることができます。
これでレイアウトが完成しました。
次は、テーブル全体を真ん中に寄せる設定をします。