jadual CSS

Jadual CSS

Menggunakan CSS boleh menambah baik penampilan jadual HTML.

Sempadan jadual

Tentukan sempadan jadual CSS menggunakan atribut sempadan.

Contoh berikut menentukan sempadan hitam untuk elemen Th dan TD jadual:

        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        table,th,td
        {
            border:1px solid black;
        }
    </style>
</head>

<body>
<table>
    <tr>
        <th>数学</th>
        <th>语文</th>
    </tr>
    <tr>
        <td>90</td>
        <td>98</td>
    </tr>
    <tr>
        <td>95</td>
        <td>94</td>
    </tr>
</table>
</body>
</html>

Jalankan atur cara untuk mencubanya

Nota : Jadual dalam contoh di atas mempunyai sempadan berganda. Ini kerana jadual dan elemen th/td mempunyai sempadan yang berasingan.

Untuk memaparkan satu jidar jadual, gunakan atribut runtuhan sempadan.

Rubuhkan jidar

Sifat runtuh sempadan menetapkan sama ada jidar jadual diruntuhkan menjadi satu jidar atau pemisah Buka:

       <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        table {
            border-collapse: collapse;
        }

        table, td, th {
            border: 1px solid black;
        }
    </style>
</head>

<body>
<table>
    <tr>
        <th>数学</th>
        <th>语文</th>
    </tr>
    <tr>
        <td>90</td>
        <td>98</td>
    </tr>
    <tr>
        <td>95</td>
        <td>94</td>
    </tr>
</table>
</body>
</html>

Jalankan program dan cuba

Lebar dan tinggi jadual

Lebar dan atribut ketinggian mentakrifkan lebar dan tinggi jadual.

Contoh berikut ialah jadual yang menetapkan lebar 100% dan ketinggian elemen ke 50 piksel:

       <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
table,td,th
{
	border:1px solid black;
}
table
{
	width:100%;
}
th
{
	height:50px;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>

Jalankan atur cara untuk mencubanya

Penjajaran teks jadual

Penjajaran teks dan sifat penjajaran menegak dalam jadual.

Atribut penjajaran teks menetapkan penjajaran mendatar, seperti kiri, kanan atau tengah:

Contoh

rreee

Jalankan program dan cuba

Instance

Sifat penjajaran menegak menetapkan penjajaran menegak, seperti atas, bawah atau tengah:

rreee

Jalankan program untuk mencubanya

Pelapik meja

Pelapik td dan elemen ke harus digunakan jika sempadan antara ruang dikawal dalam kandungan jadual Atribut:

        <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
table,td,th
{
	border:1px solid black;
}
td
{
	text-align:right;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>

Jalankan program dan cuba

Warna jadual

Contoh berikut menentukan warna sempadan dan teks serta warna latar belakang elemen ke:

        <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
	border:1px solid black;
}
td
{
	height:50px;
	vertical-align:bottom;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>

Jalankan atur cara untuk mencubanya

Contoh

Buat jadual yang diperibadikan

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style>
table, td, th
{
	border:1px solid black;
}
td
{
	padding:15px;
}
</style>
</head>

<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>0</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>0</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>0</td>
</tr>
</table>
</body>
</html>

Jalankan program dan cuba

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> table, td, th { border:1px solid green; } th { background-color: #ca6fc3; color:white; } </style> </head> <body> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td> </tr> </table> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

jadual CSS

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]