HTML と CSS を使用してレスポンシブなテーブル レイアウトを作成する方法

HTML と CSS を使用してレスポンシブなテーブル レイアウトを作成する方法

HTML は Web ページの構造を構築するために使用されるマークアップ言語であり、CSS は Web ページの設定に使用されます。 Web ページの構造、スタイルとレイアウト。 Web デザインでは、テーブルはデータを表形式で表現するために使用される一般的な要素です。この記事では、HTML と CSS を使用してレスポンシブなテーブル レイアウトを作成する方法を紹介し、具体的なコード例を示します。

まず、HTML ドキュメントを作成し、<table> タグを使用してテーブルを定義する必要があります。 <code><table> タグはテーブルの最上位コンテナであり、一連の <code><tr> タグを含めることができます。各 <code><tr> タグはデータの行を表します。各行のデータは、テーブル内のセルである <code><td> タグによって定義されます。 <code>次に、単純な HTML テーブル構造の例を示します。

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

上の例では、3 列、3 行のデータを含む単純なテーブルを作成しました。次に、CSS を使用してテーブルのスタイルとレイアウトを設定します。

テーブルをさまざまなデバイスで適切に表示するには、CSS メディア クエリを使用して応答性の高いテーブル レイアウトを作成します。メディア クエリは、デバイスの幅に基づいてスタイルを動的に変更できます。

レスポンシブ テーブル レイアウトのサンプル CSS コードは次のとおりです:

/* 默认表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
}

/* 表头样式 */
th {
  background-color: #f1f1f1;
  font-weight: bold;
  text-align: left;
  padding: 8px;
}

/* 表格数据样式 */
td {
  padding: 8px;
}

/* 媒体查询：在窗口宽度小于600px时改变表格布局 */
@media screen and (max-width: 600px) {
  table {
    border: none;
  }
  tr {
    border-bottom: 1px solid #ddd;
    display: block;
    margin-bottom: 10px;
  }
  td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }
  td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
}

上の例では、テーブルのデフォルト スタイルを設定し、メディア クエリを使用してウィンドウ幅が狭いデバイスをターゲットにしています。 600px以上 レイアウト調整を行います。小さな画面デバイスでは、テーブルの行とセルをブロックレベルの要素として設定し、適切な境界線と間隔を追加します。同時に、

::before

疑似要素を使用して各セルのラベルを追加します。 上記の HTML と CSS コードを使用すると、応答性の高いテーブル レイアウトを作成できます。ユーザーが大画面のデスクトップ デバイスで Web ページを閲覧している場合でも、小画面のモバイル デバイスで閲覧している場合でも、表は最適な表示効果で表示できます。

この記事が、HTML と CSS を使用してレスポンシブなテーブル レイアウトを作成する方法を理解するのに役立つことを願っています。 HTMLやCSSのさまざまなプロパティやテクニックを柔軟に活用することで、より美しく、使いやすいWebデザインを作成できます。

以上がHTML と CSS を使用してレスポンシブなテーブル レイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。