masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > colspan属性怎么使用

colspan属性怎么使用

不言
Lepaskan： 2019-02-12 13:20:13
asal
15236 orang telah melayarinya

HTML中的colspan属性指定单元格应跨越的列数。它允许单个表格单元格跨越多个单元格或列的宽度。colspan属性实现的功能与Excel中的电子表格程序的“合并单元格”的功能相同。

html

在创建HTML表时，colspan属性可以与和元素一起使用。

colspan属性与标签一起使用时，colspan属性决定了它应该跨越的标准单元格的数量。

colspan属性与标签一起使用时，colspan属性决定了它应该跨越的标题单元格的数量。

我们来看具体的示例

与标签一起使用

代码如下

<!DOCTYPE html>  
<html>  
<head>  
<title>HTML colspan</title>  
<style> 
table, th, td { 
    border: 1px solid black; 
    border-collapse: collapse; 
    padding: 6px; 
            } 
</style> 
</head>  
<body style = "text-align:center">   
<table> 
<tr> 
<th>名称</th> 
<th>价格</th> 
</tr> 
<tr> 
<td>樱桃</td> 
<td>$10</td> 
</tr> 
<tr> 
<td>草莓</td> 
<td>$8</td> 
</tr> 
<!-- 最后一行 --> 
<tr> 
<!-- 此td将跨越两列，即单个列将占用2的空间 -->
<td colspan="2">总价: $18</td> 
</tr> 
</table> 
</body>  
</html>
Salin selepas log masuk

效果如下：

html

与标签一起使用

代码如下

<!DOCTYPE html>  
<html>  
<head>  
<title>HTML colspan</title>  
<style> 
table, th, td { 
   border: 1px solid black; 
   border-collapse: collapse; 
   padding: 6px; 
            } 
</style> 
</head>  
<body style = "text-align:center">   
<table> 
<tr> 
<th colspan="2">价格</th> 
</tr> 
<tr> 
<td>樱桃</td> 
<td>$10</td> 
</tr> 
<tr> 
<td>$8</td> 
</tr> 
</table> 
</body>  
</html>
Salin selepas log masuk

效果如下：

html

本篇文章到这里就全部结束了，更多有关前端的精彩内容大家可以关注php中文网的其他相关栏目教程！！！

Atas ialah kandungan terperinci colspan属性怎么使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
colspan属性
sumber：php.cn
Artikel sebelumnya：main标签的作用是什么 Artikel seterusnya：rowspan属性怎么使用
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
Gerakkan kandungan ke kiri dengan menambahkan sifat Width Saya telah memberikan margin kepada badan. utama {margin kiri: 200px; jidar kanan: 200px p...
daripada 2024-04-06 22:01:35
0
3
816
Bagaimana untuk membuat elemen terapung disusun secara menegak dan bukannya secara mendatar dalam CSS? Saya cuba membuat halaman web dengan dua lajur, dengan kandungan utama di satu pihak dan k...
daripada 2024-04-06 20:45:26
0
2
386
Kira jumlah medan dalam jadual lain menggunakan pertanyaan MySQL SQL Saya mempunyai skema seperti ini: Jadual pengguna dengan atribut "user_id" dan &...
daripada 2024-04-06 19:39:29
0
1
441
Gaya CSS tidak digunakan pada tapak Saya sedang membuat tapak web menggunakan Bootstrap5 tetapi sifat index.css tidak digunaka...
daripada 2024-04-06 17:12:23
0
1
336
Cara menukar sifat tatasusunan bersarang JSON "id_projek" dan "nama_projek" 问题：[{"project_id":1,"project_name":"CDP","role":&q...
daripada 2024-04-06 15:39:51
0
1
466
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