masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > Sifat CSS asas untuk helaian gaya

Sifat CSS asas untuk helaian gaya

王林
Lepaskan： 2023-09-02 10:25:01
ke hadapan
1330 orang telah melayarinya

Kita boleh menggunakan CSS untuk menentukan gaya jadual. Sifat berikut biasanya digunakan untuk menggayakan

dan elemennya -
  • sempadan

    Sifat sempadan CSS digunakan untuk menentukan sempadan - lebar, gaya sempadan dan warna sempadan.

  • border-collapse

    Atribut ini digunakan untuk menentukan sama ada elemen

harus mempunyai sempadan dikongsi atau berasingan.
  • caption

    atribut sisi kapsyen digunakan untuk meletakkan kotak tajuk jadual secara menegak.

  • empty-cells

    Atribut ini digunakan untuk menentukan paparan sel kosong dalam jadual.

  • table-layout strong>

    Mentakrifkan algoritma yang digunakan oleh penyemak imbas untuk menyusun baris, lajur dan sel jadual.

    • example

    Contoh berikut menggambarkan gaya jadual -

    demo live 

    <!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>
    Salin selepas log masuk
    e

    output

    ini memberikan output berikut -

    样式表的基本 CSS 属性

    example

    live demo

    <!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>
    Salin selepas log masuk
    e样式表的基本 CSS 属性output 🎜 ini adalah Keluaran berikut keluar-🎜🎜🎜🎜

    Atas ialah kandungan terperinci Sifat CSS asas untuk helaian gaya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Artikel sebelumnya：Nilai sifat muat objek CSS Artikel seterusnya：Penggunaan peraturan CSS @charset
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Artikel terbaru oleh pengarang
    Isu terkini
    function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
    daripada 2024-04-29 11:01:01
    0
    3
    2672
    Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
    daripada 2024-04-23 00:22:19
    0
    11
    2802
    Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
    daripada 2024-04-19 15:37:47
    0
    1
    2365
    Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
    daripada 2024-04-18 23:52:34
    0
    1
    2228
    Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
    daripada 2024-04-16 10:10:18
    0
    0
    2329
    Topik-topik yang berkaitan
    Lagi>
    Cadangan popular
    Tutorial Popular
    Lagi>
    Tutorial berkaitan
    Cadangan popular
    Kursus terkini
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan