CSS colspan sẽ cho phép bạn thay đổi giao diện của các bảng HTML của mình. Đọc bài viết này và bạn sẽ học cách tạo các bảng có nhiều cấu trúc khác nhau.

Bạn đang xem : ô trong bảng css colspan

Cách sử dụng css colspan CSS colspan là thuộc tính cho phép bạn ra lệnh cho số lượng cột một ô trong bảng nhất định có thể chiếm. Nếu bạn đang gặp khó khăn về việc tạo nhiều cột, thì không cần tìm đâu xa! Hãy đọc bài viết này và chúng tôi sẽ chỉ cho bạn cách hoạt động của CSS colspan cùng với việc hướng dẫn bạn cách tạo các cấu trúc bảng phức tạp.

Hãy tiếp tục đọc để trau dồi thêm kiến ​​thức CSS của bạn!

Colspan là gì?

Colspan là một thuộc tính HTML được định nghĩa là colspan và bạn có thể sử dụng nó để kiểm soát số lượng cột của một ô trong bảng . < / p>

Đơn giản, khi bạn cần trả lời câu hỏi “làm thế nào để một ô trong bảng có thể chiếm nhiều hơn một cột?” câu trả lời của bạn là sử dụng colspan!

Cách sử dụng Colspan

Khi bạn có bảng HTML, bạn có thể đính kèm thuộc tính colspan vào bất kỳ ô nào trong bảng . Sau đó, bạn cần cung cấp cho nó một giá trị có thể xác định số cột mà ô sẽ chiếm.

– Các giá trị được Colspan chấp nhận

Giá trị của colspan là một số nguyên không âm lớn hơn một và giá trị mặc định của nó là một.

– Hỗ trợ trình duyệt web cho Colspan

Tại thời điểm viết bài, tất cả các trình duyệt hiện đại đều hỗ trợ colspan.

Ví dụ về Bảng HTML có Colspan

– Ví dụ 1

Trong đoạn mã này, chúng tôi đã tạo một bảng HTML có một tiêu đề HTML duy nhất với giá trị colspan là hai:

Khi bạn xem nó trong trình duyệt, kết quả như sau:

  • Cột “Tên” mở rộng thành hai cột
  • Tất cả các giá trị tương ứng của “Số điện thoại” đều trống

– Ví dụ 2

Trong trường hợp này, chúng tôi đã áp dụng cùng một giá trị colspan cho dữ liệu tương ứng với tiêu đề trong bảng.

– Lưu ý

Giá trị colspan lớn hơn số cột có thể có trong bảng sẽ đẩy các ô khác ra xa . Ngoài ra, có xu hướng bạn sẽ có các tiêu đề bảng với dữ liệu bảng không tương ứng, vì vậy hãy ghi nhớ điều đó /

< p id = "ez-clearholder-medrectangle-4">

– Ví dụ 3

Trong khối mã tiếp theo, cột “Tên” có colspan = ”5 ″. Khi bạn đếm số cột trong bảng, bạn sẽ đến bốn cột . Trong trường hợp này, trình duyệt web sẽ diễn giải colspan = ”5 ″ là colspan =” 4 ″ . Cuối cùng, năm là số cột lớn nhất có thể có trong bảng:

Trình duyệt web sẽ bỏ qua colspan = ”0 ″ . Firefox và Chrome sẽ coi colspan = ”1000 ″ là số cột lớn nhất. Đối với Internet Explorer (IE), nó sẽ tuân theo giá trị lớn này, điều này sẽ dẫn đến tình trạng tràn nhiều dữ liệu trong trình duyệt. Cách khắc phục là áp dụng thu gọn đường viền.

bảng {
biên giới-sụp đổ: sụp đổ;
}

Tôi có thể Áp dụng Kiểu cho CSS Colspan không?

Có, bạn có thể tạo kiểu cho colspan trong CSS. Tất cả những gì bạn cần là công cụ chọn thuộc tính CSS để điều khiển giao diện của bảng CSS.

– Ví dụ về áp dụng kiểu cho CSS Colespan

Trong khối mã tiếp theo, tiêu đề HTML, “First Name”, có thuộc tính colspan:

Mã CSS tiếp theo sẽ tạo kiểu cho tất cả “First Name” có giá trị colspan hợp lệ.

[colspan] {
màu nền: #ddd;
}

Bạn có thể làm gì với Colspan

Colspan mở ra khả năng tạo cấu trúc bảng phức tạp . Chỉ một vài trong số đó là:

  • Bảng hóa đơn
  • Tiêu đề nhiều cột
  • Chi tiết về nhân viên

– Tạo Bảng Hóa đơn

Một bảng hóa đơn hiển thị kết quả bán hàng. Bạn có thể sử dụng colspan để sao chép một cái, với một chút CSS để tạo kiểu.

Mã HTML tiếp theo là mã cho bảng hóa đơn :

& lt; bảng & gt;

& lt; caption & gt; Hóa đơn & lt; / caption & gt;

& lt; tr & gt;

& lt; th & gt; Item / Desc. & lt; / th & gt;

& lt; th & gt; Qty. & lt; / th & gt;

& lt; th & gt; @ & lt; / th & gt;

& lt; th & gt; Giá & lt; / th & gt;

& lt; / tr & gt;

& lt; tr & gt;

& lt; td & gt; Hộp giấy & lt; / td & gt;

& lt; td & gt; 50 & lt; / td & gt;

& lt; td & gt; 1,99 & lt; / td & gt;

& lt; td & gt; 99,5 & lt; / td & gt;

& lt; / tr & gt;

& lt; tr & gt;

& lt; td & gt; Hộp đựng Giấy & lt; / td & gt;

& lt; td & gt; 5 & lt; / td & gt;

& lt; td & gt; 30,99 & lt; / td & gt;

& lt; td & gt; 154,95 & lt; / td & gt;

& lt; / tr & gt;

& lt; tr & gt;

& lt; td & gt; Giỏ & lt; / td & gt;

& lt; td & gt; 3 & lt; / td & gt;

& lt; td & gt; 15 & lt; / td & gt;

Xem Thêm  Cách thêm chủ đề và nội dung - liên kết email html với chủ đề

& lt; td & gt; 45 & lt; / td & gt;

& lt; / tr & gt;

& lt; tr & gt;

& lt; th colspan = ”3 ″ & gt; Tổng phụ & lt; / th & gt;

& lt; td & gt; 299.45 & lt; / td & gt;

& lt; / tr & gt;

& lt; tr & gt;

& lt; th colspan = ”2 ″ & gt; Thuế & lt; / th & gt;

& lt; td & gt; 7% & lt; / td & gt;

& lt; td & gt; 20,96 & lt; / td & gt;

& lt; / tr & gt;

& lt; tr & gt;

& lt; th colspan = ”3 ″ & gt; Tổng số & lt; / th & gt;

& lt; td & gt; 320,41 & lt; / td & gt;

& lt; / tr & gt;

& lt; / table & gt;

Tiếp theo, CSS trong khối mã tiếp theo sẽ thay đổi giao diện của bảng:

chính {
chiều rộng: 70%;
margin: 2em tự động;
}
bảng {
tràn: ẩn;
border: 1px solid #ccc;
chiều rộng: 100%;
biên giới-sụp đổ: sụp đổ;
đệm: 0,2em;
}
th, td {
border: 1px solid # 000000;
đệm: 1,2em;
}
thứ {
text-align: left;
màu nền: # 0000000d;
}
chú thích {
margin-bottom: 2em;
}

– Tạo Tiêu đề Nhiều Cột

Một cột nhiều cột sẽ kéo dài nhiều cột và như bạn đã học trước đó, bạn có thể thực hiện được điều này với colspan.

Ngoài ra, khối mã tiếp theo là HTML cho tiêu đề nhiều cột :

& lt; chính & gt;

& lt; bảng & gt;

& lt; caption & gt; Kỳ vọng Cuộc sống Theo Độ tuổi Hiện tại & lt; / caption & gt;

& lt; tr & gt;

& lt; th colspan = ”2 ″ & gt; 20 & lt; / th & gt;

& lt; th colspan = ”2 ″ & gt; 65 & lt; / th & gt;

& lt; th colspan = ”2 ″ & gt; 40 & lt; / th & gt;

& lt; / tr & gt;

& lt; tr & gt;

& lt; th & gt; Nam & lt; / th & gt;

& lt; th & gt; Phụ nữ & lt; / th & gt;

& lt; th & gt; Nam & lt; / th & gt;

& lt; th & gt; Phụ nữ & lt; / th & gt;

& lt; th & gt; Nam & lt; / th & gt;

& lt; th & gt; Phụ nữ & lt; / th & gt;

& lt; / tr & gt;

& lt; tr & gt;

& lt; td & gt; 82 & lt; / td & gt;

& lt; td & gt; 77 & lt; / td & gt;

& lt; td & gt; 85 & lt; / td & gt;

& lt; td & gt; 78 & lt; / td & gt;

& lt; td & gt; 82 & lt; / td & gt;

& lt; td & gt; 81 & lt; / td & gt;

& lt; / tr & gt;

& lt; / table & gt;

& lt; / main & gt;

Khối CSS tiếp theo sẽ giúp bảng dễ nhìn hơn:

chính {
chiều rộng: 70%;
margin: 2em tự động;
}
bảng {
tràn: ẩn;
border: 1px solid #ccc;
chiều rộng: 100%;
biên giới-sụp đổ: sụp đổ;
đệm: 0,2em;
}
th, td {
border: 1px solid # 000000;
đệm: 1,2em;
}
thứ {
text-align: left;
màu nền: # 0000000d;
}
chú thích {
margin-bottom: 2em;
}

– Đưa ra chi tiết nhân viên trong một bảng

Bạn có thể tạo một bảng hiển thị thông tin chi tiết về nhân viên, vì vậy bạn chỉ cần tạo một số tiêu đề bảng trải dài trên nhiều cột .

Tiếp theo là HTML cho bảng chi tiết nhân viên và bạn có thể điều chỉnh nó theo nhu cầu của mình:

& lt; chính & gt;

& lt; bảng & gt;

& lt; h1 & gt; Chi tiết về Nhân viên & lt; / h1 & gt;

& lt; tr & gt;

& lt; th colspan = ”1 ″ & gt; & lt; / th & gt;

& lt; th colspan = ”2 ″ & gt; Phần cứng & lt; / th & gt;

& lt; th colspan = ”2 ″ & gt; Tiếp thị & lt; / th & gt;

& lt; th colspan = ”2 ″ & gt; Nguồn nhân lực & lt; / th & gt;

& lt; th colspan = ”2 ″ & gt; Phần mềm & lt; / th & gt;

& lt; th colspan = ”3 ″ & gt; Khác & lt; / th & gt;

& lt; / tr & gt;

& lt; tr & gt;

& lt; th & gt; Khoa & lt; / th & gt;

& lt; th & gt; Nhúng & lt; / th & gt;

& lt; th & gt; Cơ khí & lt; / th & gt;

& lt; th & gt; Trong nhà & lt; / th & gt;

& lt; th & gt; Ngoài trời & lt; / th & gt;

& lt; th & gt; Tại chỗ & lt; / th & gt;

& lt; th & gt; Việt vị & lt; / th & gt;

& lt; th & gt; PHP & lt; / th & gt;

& lt; th & gt; Python & lt; / th & gt;

& lt; th & gt; Tài khoản & lt; / th & gt;

& lt; th & gt; Tài sản & lt; / th & gt;

& lt; th & gt; Căn tin & lt; / th & gt;

& lt; / tr & gt;

& lt; tr & gt;

& lt; td & gt; H.O.D & lt; / td & gt;

& lt; td & gt; Martinez & lt; / td & gt;

& lt; td & gt; Maxwell & lt; / td & gt;

& lt; td & gt; Simon & lt; / td & gt;

& lt; td & gt; Johnson & lt; / td & gt;

Xem Thêm  Javascript trim: Cách loại bỏ WhiteSpaces trong JavaScript - cách cắt bỏ khoảng trắng trong javascript

& lt; td & gt; Maverick & lt; / td & gt;

& lt; td & gt; Dos Santos & lt; / td & gt;

& lt; td & gt; Victor & lt; / td & gt;

& lt; td & gt; Micheal & lt; / td & gt;

& lt; td & gt; Sanchez & lt; / td & gt;

& lt; td & gt; Ruiz & lt; / td & gt;

& lt; td & gt; John & lt; / td & gt;

& lt; / tr & gt;

& lt; tr & gt;

& lt; td & gt; Kinh nghiệm (tính bằng năm) & lt; / td & gt;

& lt; td & gt; 15 & lt; / td & gt;

& lt; td & gt; 8 & lt; / td & gt;

& lt; td & gt; 4 & lt; / td & gt;

& lt; td & gt; 10 & lt; / td & gt;

& lt; td & gt; 4 & lt; / td & gt;

& lt; td & gt; 3 & lt; / td & gt;

& lt; td & gt; 2 & lt; / td & gt;

& lt; td & gt; 11 & lt; / td & gt;

& lt; td & gt; 13 & lt; / td & gt;

& lt; td & gt; 12 & lt; / td & gt;

& lt; td & gt; 18 & lt; / td & gt;

& lt; / tr & gt;

& lt; tr & gt;

& lt; td & gt; No of Teams & lt; / td & gt;

& lt; td & gt; 7 & lt; / td & gt;

& lt; td & gt; 7 & lt; / td & gt;

& lt; td & gt; 3 & lt; / td & gt;

& lt; td & gt; 2 & lt; / td & gt;

& lt; td & gt; 2 & lt; / td & gt;

& lt; td & gt; 2 & lt; / td & gt;

& lt; td & gt; 5 & lt; / td & gt;

& lt; td & gt; 5 & lt; / td & gt;

& lt; td & gt; 5 & lt; / td & gt;

& lt; td & gt; 5 & lt; / td & gt;

& lt; td & gt; 5 & lt; / td & gt;

& lt; / tr & gt;

& lt; tr & gt;

& lt; td & gt; Dự án / Nhiệm vụ được giao & lt; / td & gt;

& lt; td & gt; 5 & lt; / td & gt;

& lt; td & gt; 12 & lt; / td & gt;

& lt; td & gt; 20 & lt; / td & gt;

& lt; td & gt; 14 & lt; / td & gt;

& lt; td & gt; 10 & lt; / td & gt;

& lt; td & gt; 8 & lt; / td & gt;

& lt; td & gt; 8 & lt; / td & gt;

& lt; td & gt; 5 & lt; / td & gt;

& lt; td & gt; 7 & lt; / td & gt;

& lt; td & gt; 3 & lt; / td & gt;

& lt; td & gt; 5 & lt; / td & gt;

& lt; / tr & gt;

& lt; tr & gt;

& lt; td & gt; Không có nhân viên & lt; / td & gt;

& lt; td & gt; 34 & lt; / td & gt;

& lt; td & gt; 25 & lt; / td & gt;

& lt; td & gt; 2 & lt; / td & gt;

& lt; td & gt; 5 & lt; / td & gt;

& lt; td & gt; 4 & lt; / td & gt;

& lt; td & gt; 10 & lt; / td & gt;

& lt; td & gt; 182 & lt; / td & gt;

& lt; td & gt; 150 & lt; / td & gt;

& lt; td & gt; 75 & lt; / td & gt;

& lt; td & gt; 82 & lt; / td & gt;

& lt; td & gt; 6 & lt; / td & gt;

& lt; / tr & gt;

& lt; / table & gt;

& lt; / main & gt;

Mã CSS tiếp theo sẽ thay đổi giao diện của bảng trong trình duyệt web.

chính {
chiều rộng: 70%;
margin: 2em tự động;
}
bảng {
tràn: ẩn;
border: 1px solid #ccc;
chiều rộng: 100%;
biên giới-sụp đổ: sụp đổ;
đệm: 0,2em;
}
h1 {
text-align: center;
}
th, td {
border: 1px solid # 000000;
đệm: 1,2em;
}
thứ {
text-align: left;
màu nền: # 0000000d;
}
chú thích {
margin-bottom: 2em;
}

Colspan không hoạt động: Bạn có thể làm gì

Khi colspan không hoạt động trong các bảng HTML của bạn, bạn có thể kiểm tra những điều sau :

  • Đảm bảo colspan có một giá trị, vì một chuỗi trống sẽ không hoạt động.
  • Giá trị Colspan là một số nguyên dương, do đó không cho phép các giá trị âm.
  • Giá trị Colspan không phải là số thập phân, vì vậy đừng nhập một giá trị như vậy.

Sự khác biệt giữa Colspan và Column-span

Colspan là một thuộc tính HTML hoạt động trên các ô của bảng HTML. Trong khi, CSS column-span là thuộc tính được sử dụng trong bố cục nhiều cột CSS . Hơn nữa, với column-span , bạn có thể mở rộng một phần tử trên nhiều cột .

Ví dụ: trong các khối mã tiếp theo, có một bố cục nhiều cột CSS được tạo với một khoảng cột CSS. Tiêu đề kéo dài trên cả ba cột trong bố cục, điều này có thể thực hiện được với column-span: 3 :

& lt; div class = ”multi-column” & gt;
& lt; h1 & gt; Tiêu đề này kéo dài cả ba cột & lt; / h1 & gt;
& lt; p & gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tình cờ vượt qua cơn đau đẻ và cơn đau. & lt; / p & gt;
& lt; p & gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tình cờ vượt qua cơn đau đẻ và cơn đau. & lt; / p & gt;
& lt; / div & gt;
.multi-column {
nền – màu: #dddddd;
đệm: 2em;
cột – số đếm: 3;
cột – quy tắc: 5px solid # 1560bd;
}
h1 {
outline: 2px solid red;
cột – span: tất cả;
}}

Xem Thêm  XML - Các lược đồ - giản đồ trong xml là gì

Kết luận

Trong bài viết này, bạn đã tìm hiểu rất nhiều về CSS column-span và các giá trị của nó cùng với sự khác biệt của nó so với CSS column-span . Dưới đây là tóm tắt tất cả những gì chúng tôi đã dạy bạn trong bài viết này:

  • Colspan là một thuộc tính HTML quy định số lượng cột cho một ô
  • Colspan chấp nhận các giá trị dương
  • Colspan bỏ qua các giá trị âm và thập phân
  • Firefox và Chrome diễn giải colspan = ”1000 ′ ′ là số cột lớn nhất trong bảng
  • Internet Explorer (IE) sẽ tuân theo colspan = ”1000”. Điều này dẫn đến tràn trong trình duyệt
  • Internet Explorer sẽ cho phép Internet Explorer diễn giải colspan = ”1000 ′ ′ giống như Firefox và Chrome
  • COLspan là một thuộc tính, trong khi CSS column-span là một thuộc tính
  • Trong số các ứng dụng khác, bạn có thể tạo bảng hóa đơn bằng colspan

Css Colspan được triển khai trong Bảng html Bây giờ bạn đã có tất cả thông tin này về CSS colspan, bạn có thể bắt đầu tạo các bảng phức tạp .

5/5 – (17 phiếu bầu)

Bây giờ bạn đã có tất cả thông tin này về CSS Colspan, bạn có thể bắt đầu. Bạn cũng có thể tận dụng các ví dụ của chúng tôi và điều chỉnh chúng theo những gì bạn đã hình dung để tạo!


Xem thêm những thông tin liên quan đến chủ đề ô bảng css colspan

How to Use Rowspan and Colspan Attribute to Merge Table Cells in HTML | Tables in HTML and CSS

alt

  • Tác giả: Tech Basics
  • Ngày đăng: 2021-12-02
  • Đánh giá: 4 ⭐ ( 2615 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this tutorial, you’ll learn how to create and style tables in HTML and CSS. You will also learn how to use rowspan and colspan attribute to merge table cells in HTML.

    ⌚ Timestamps
    0:00 Video Intro
    0:14 Overview
    2:16 Creating the table
    10:18 Styling the table

    📃 Watch other playlists
    -HTML & CSS Tutorials: https://www.youtube.com/playlist?list=PLvi9EcWzZW3vLSjrWPxM7lxSN4YujeJkW
    -Microsoft Word Tutorials: https://www.youtube.com/playlist?list=PLvi9EcWzZW3szrrtQStUmHNHHALV_RFWQ
    -Microsoft Excel Tutorials: https://www.youtube.com/playlist?list=PLvi9EcWzZW3ubJZ5BjraR7wB8gisXcuT-
    -Microsoft PowerPoint Tutorials: https://www.youtube.com/playlist?list=PLvi9EcWzZW3tp83h_4y-2CZ48jDFBgggj

    I hope you learned something from this video.
    🔔 Subscribe to my YouTube channel
    https://www.youtube.com/channel/UChtSQvSmAJTSgrtAGXernmw
    🚩 Connect with me on Facebook:
    https://www.facebook.com/TechBasicsYouTube

    ❌ Tags (IGNORE): colspan and rowspan in html, colspan and rowspan, colspan and rowspan in html in hindi, colspan and rowspan in hindi, colspan and rowspan attribute, colspan and rowspan in same td, colspan and rowspan in one td, html, rowspan, colspan, colspan and rowspan together in html, html tutorial, css tutorial, html, css, Table In HTML and CSS, how to create a table in html and css, how to create a table, table, html table, how to style a table, how to style an html table, html, html tutorial, css tutorial, css, tutorial, html th, html tr, html td, html table cell, table cell, how to create rows and columns in a table, html table, html table tutorial, html table rowspan colspan, html table tag, html tables, html tables, html tables hindi, learn html, html tutorial, html tr, html td, html tbody, html table thead, responsive table html css, html table border, html table design, html table background image, html table background color, css table, css table image, tech basics, html table, html tables, table in html, table tag, html tables hindi, table, tables, css table, border, banded rows, create,design,html,html5,css,row,cell,data,header,heading,style,styling,layout,rows,columns,tutorial,tr,td,th,zebra stripes, table html css, responsive table, linear gradient, css gradient, gradient background css, table caption in html, table caption, horizontal, vertical, development, html and css tables, how to create a table, how to style a table, web, website, web design.

Bảng trong HTML

  • Tác giả: webvn.com
  • Đánh giá: 3 ⭐ ( 7894 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và cách sử dụng cũng như trang trí bảng trong HTML.

HTML Table: Cách tạo bảng trong HTML

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 4985 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết hôm nay, mình sẽ trình bày những kiến ​​thức cơ bản về bảng trong HTML, bao gồm cách tạo bảng trong HTML, cách sử dụng các thẻ

colspan và rowspan Chuyên đề

  • Tác giả: hocwebchuan.com
  • Đánh giá: 3 ⭐ ( 7737 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: colspan và rowspan

HTML colspan trong CSS

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 4974 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Không có tương tự CSS đơn giản, thanh lịch cho colspan. Các tìm kiếm về chính…

Table trong HTML (colspan, rowspan, cellpadding và cellspacing)

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 1078 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ table trong HTML, cách sử dụng các thuộc tính colspan, rowspan và cellpadding trong HTML, hướng dẫn các bước tạo table trong HTML từ cơ bản đến nâng cao

Cách CSS Bảng (Table)

  • Tác giả: laptrinhvienphp.com
  • Đánh giá: 5 ⭐ ( 8561 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn tự học CSS này, bạn sẽ tìm hiểu toàn tập cách CSS bảng đẹp, CSS table một cách dễ hiểu nhất.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php