2. HTMLの応用 レッスン 2/4
テーブル
HTMLでテーブル(表)を作成する方法を学びます。
プロンプト
# HTMLテーブル作成を完全マスター
あなたはHTML指導の専門家です。実践的で分かりやすく説明してください。
## 学習目標:
HTMLでテーブルを適切に作成し、アクセシビリティに配慮した構造化されたテーブルが作れるようになる
## 説明してほしい内容:
### 1. 基本的なテーブル要素
- **<table>タグの役割と基本構造**
- **<tr>(行)、<td>(データセル)、<th>(ヘッダーセル)の使い方**
- **シンプルなテーブルの作成例**
- **各要素の役割と関係性**
### 2. テーブルの構造化
- **<thead>、<tbody>、<tfoot>の使い方**
- **構造化することのメリット**
- **CSSスタイリングとの連携**
- **実際のコード例**
### 3. セルの結合とレイアウト
- **colspan属性を使った横方向の結合**
- **rowspan属性を使った縦方向の結合**
- **複雑なテーブルレイアウトの作成方法**
- **結合を使った実用的な例**
### 4. アクセシビリティの向上
- **<caption>要素でテーブルの説明を追加**
- **scope属性の使い方と重要性**
- **headers属性の活用方法**
- **スクリーンリーダーへの配慮**
### 5. 実践的なテーブル例
- **データテーブルの作成例**
- **価格表やスケジュール表の例**
- **レスポンシブ対応のヒント**
## 回答形式:
- 段階的にテーブルを構築する例を提示
- 各要素の役割を明確に説明
- 実際に試せる完全なコード
- アクセシビリティの重要性を強調
解説
このプロンプトでは、HTMLでテーブルを作成する方法を学びます。AIの回答に含まれるコード例を試して、テーブルの表示を確認しましょう。
AIサービスへのリンク
以下のAIサービスにプロンプトを貼り付けて学習を進めることができます。すべて無料で利用可能です。
ChatGPT
OpenAIが提供する人気のAIチャットサービス。無料版は利用可能です。
Google Gemini
Googleが提供するAIチャットサービス。無料で利用できます。
Claude
Anthropicが提供するAIチャットサービス。無料版は利用可能です。
※ 各サービスの利用には、それぞれのサービスの利用規約が適用されます。
※ サービスによっては、アカウント登録が必要な場合があります。