CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用したテーブルのスタイリング

CSSを使用してテーブルのスタイルを定義できます。次のプロパティは、

とその要素のスタイルを設定するために使用されます-

  • 境界線

    CSS borderプロパティは、border-width、border-style、border-colorを定義するために使用されます。

  • 境界の崩壊

    このプロパティは、

要素の境界線を共有するか個別にするかを指定するために使用されます。

  • キャプション

    caption-sideプロパティは、テーブルのキャプションボックスを垂直方向に配置するために使用されます。

  • 空のセル

    このプロパティは、テーブルの空のセルの表示を指定するために使用されます。

  • テーブルレイアウト テーブルの行、列、およびセルをレイアウトするためにブラウザが使用するアルゴリズムを定義します。


    • 例

    次の例は、テーブルのスタイル設定を示しています-

    <!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: 'Bookman Old Style', serif;
}
th {
   letter-spacing: 1.9px;
}
#one {
   border-right: thick solid blue;
}
td {
   text-align: center;
}
</style>
</head>
<body>
<h2>Employee List</h2>
<div>
<table>
<tr>
<th id="one">Employee</th>
<th>Department</th>
</tr>
<tr>
<td>John </td>
<td>Marketing</td>
</tr>
<tr>
<td>Brad</td>
<td>Finance</td>
</tr>
<tr>
<td>Tim </td>
<td>IT</td>
</tr>
<tr>
<td>Steve</td>
<td>Operations</td>
</tr>
</table>
</div>
</body>
</html>

    出力

    これにより、次の出力が得られます-

    CSSを使用したテーブルのスタイリング

    例

    <!DOCTYPE html>
<html>
<head>
<style>
table {
   float: left;
   empty-cells: hide;
   box-shadow: inset 0 0 4px orange;
}
tr {
   box-shadow: inset 0 0 10px greenyellow;
}
td {
   font-style: italic;
   box-shadow: inset 0 0 8px red;
}
table,td {
   margin: 6px;
   padding: 6px;
   border: 1px solid black;
}
table
</style>
</head>
<body>
<table>
<caption>Demo Table</caption>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>demo</td>
</tr>
<tr>
<td></td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>

    出力

    これにより、次の出力が得られます-

    CSSを使用したテーブルのスタイリング


    1. CSSでレスポンシブテーブルを作成するにはどうすればよいですか？

      CSSを使用してレスポンシブテーブルを作成するためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, san

    2. CSSのスクロールでヘッダーが固定されたHTMLテーブル

      postion：stickyとtop：0を設定することで、HTMLテーブルのスクロールに固定ヘッダーを作成できます。 例 次の例は、これを実装する方法のアイデアを示しています- <!DOCTYPE html> <html> <head> <style> div {    color: white;    display: flex;    padding: 2%;    background-color: rgba(190,155,150);   &nbs