ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

行やセルの追加

行やセルを追加してみよう

行やセルを追加するには、<tr>や<td>を追加入力する必要があります。

まずは先ほど作成した表に、「三時間目、社会」を追加してみましょう。

[追加するHTML]

 <tr>
  <td>三時間目</td>
  <td>社会</td>
 </tr>

行が1つ必要ですから、<tr>を1つ追加します。
さらに、「三時間目」を入力するセルと「社会」を入力するセル、合計2つのセルが必要なので<td>を2つ追加します。

[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>表の作成</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<table class="tableborder">

 <tr>
  <td>一時間目</td>
  <td>国語</td>
 </tr>

 <tr>
  <td>二時間目</td>
  <td>数学</td>
 </tr>

 <tr>
  <td>三時間目</td>
  <td>社会</td>
 </tr>

</table>

入力が完了したら、ブラウザで確認してみましょう。

[ブラウザでの表示例]
ブラウザで確認した画像

成功していれば、三行目と入力したテキストが表示されると思います。

講師名の追加

ついでに、教科の横に講師の名前も追加してみましょう。
国語の講師名、数学の講師名、社会の講師名を追加します。

この場合は行は追加する必要はありませんので、<td>のみを書き加えます。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>表の作成</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<table class="tableborder">

 <tr>
  <td>一時間目</td>
  <td>国語</td>
  <td>西田</td>
 </tr>

 <tr>
  <td>二時間目</td>
  <td>数学</td>
  <td>入部</td>
 </tr>

 <tr>
  <td>三時間目</td>
  <td>社会</td>
  <td>野田</td>
 </tr>

</table>

入力が完了したら、ブラウザで確認してみましょう。

[ブラウザでの表示例]
ホームページの画像

なんとなく表っぽくなってきましたね!いい感じです!

次のページでは、この表に見出し行を追加してみましょう!

覚えておきたいポイント

表の構成に気をつけよう

基本的に<tr>と<td>は何個でも増やすことができます。
ただし、互いに整合性を取らないと表として機能しなくなったり、レイアウト崩れの原因となります。

見出し行の追加
« 前のページへ 基本的な表の作成

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。