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

スタイリングテーブルに不可欠なCSSプロパティ

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

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

  • 境界線

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

  • 境界の崩壊

    このプロパティは、

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

  • キャプション

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

  • 空のセル

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

  • テーブルレイアウト

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

    • 例

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

    <!DOCTYPE html>
<html>
<head>
<style>
table, table * {
   border: thin solid;
   padding: 5px;
   font-style: italic;
}
caption {
   caption-side: bottom;
}
td {
   box-shadow: inset 0 0 6px green;
}
</style>
</head>
<body>
<table>
<caption>Demo caption</caption>
<tr>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>

    出力

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

    スタイリングテーブルに不可欠なCSSプロパティ

    例

    <!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   float: left;
}
table {
   border: 3px solid black;
}
td {
   border: 3px solid lightgreen;
}
th {
   border: 3px solid lightblue;
}
#t2 {
   border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Team Rankings</h2>
<div>
<table id="t1">
<tr>
<th>Team (Test)</th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>Australia</td>
<td>2</td>
</tr>
</table>    
</div>
<div>
<table id="t2">
<tr>
<th>Team (ODI) </th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>England</td>
<td>2</td>
</tr>
</table>
</div>
</body>
</html>

    出力

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

    スタイリングテーブルに不可欠なCSSプロパティ


    1. 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

    2. CSSの更新-テキストの装飾と下線をスタイリングするための新しいプロパティ

      次のテキスト装飾プロパティの導入により、以前よりも多くの方法でテキストのスタイルを設定できるようになりました。 text-decorationは、text-decoration-thickness、text-decoration-color、text-decoration-line、およびtext-decoration-styleの省略形です。 text-decoration-skip、text-decoration-skip-ink、text-decoration、text-underline-offset、text-underline-positionを明示的に指定する必要があります。 構