Sử dụng các thuộc tính CSS padding và border-spacing để đặt cellpadding và cellspacing cho bảng. Hướng dẫn từng bước với các ví dụ.

Bạn đang xem : khoảng cách ô và khoảng cách ô

Thẻ & lt; table & gt; có các thuộc tính cellpadding và cellspacing không được hỗ trợ trong < span> HTML5 , đó là lý do tại sao bạn nên sử dụng các thuộc tính CSS padding border-spacing thay thế.

Tạo và tạo kiểu bảng bằng các thuộc tính CSS

Vì vậy, CSS thay thế cho cellpadding sẽ là:

  

td

,

th

{

padding

:

10px

; }

CSS thay thế cho cellspacing sẽ là:

  

bảng

{

border-spacing

:

10px

; }

Hãy xem cách sử dụng chúng từng bước:

  1. Điều đầu tiên bạn cần làm là tạo & lt; bảng & gt; phần tử sẽ chứa các thẻ & lt; th & gt; , & lt; tr & gt; & lt; td & gt; .
  2. Tạo kiểu cho bảng với thuộc tính border-sập . Đặt giá trị thành “riêng biệt”.

Lưu ý rằng giá trị “riêng biệt” được đặt theo mặc định khi bạn xác định thuộc tính border .

Ví dụ về cách tạo bảng:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

bảng

,

td

,

th

{

border

:

1px

màu đen đặc;

border-sập

: riêng biệt; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ cho viền-thu gọn riêng

& lt ; /

h2

& gt;

& lt;

bảng

& gt;

& lt;

tr

& gt;

& lt;

th

& gt;

Tiêu đề

& lt; /

th

& gt;

& lt;

th

& gt;

Tiêu đề

& lt; /

th

& gt;

& lt; /

tr

& gt;

& lt;

tr

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt; /

tr

& gt;

& lt;

tr

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt; /

tr

& gt;

& lt; /

bảng

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

  1. Thêm thuộc tính

    padding

    vào & lt; th & gt; và & lt; td & gt; các phần tử để xác định

    cellpadding

    .

Ví dụ về cách thêm cellpadding với thuộc tính padding:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

bảng

,

td

,

th

{

border

:

1px

màu đen đặc;

border-sập

: riêng biệt; }

td

,

th

{

padding

:

5px

10px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ cho viền-thu gọn riêng

& lt ; /

h2

& gt;

& lt;

bảng

& gt;

& lt;

tr

& gt;

& lt;

th

& gt;

Tiêu đề

& lt; /

th

& gt;

& lt;

th

& gt;

Tiêu đề

& lt; /

th

& gt;

& lt; /

tr

& gt;

& lt;

tr

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt; /

tr

& gt;

& lt;

tr

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt; /

tr

& gt;

& lt; /

bảng

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

  1. Để đặt

    cellspacing

    , hãy xác định thuộc tính

    border-spacing

    cho & lt; table & gt; phần tử.

Ví dụ về cách đặt cellspacing với thuộc tính border-spacing:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

bảng

{

border-spacing

:

10px

; }

bảng

,

td

,

th

{

border

:

1px

màu đen đặc;

border-sập

: riêng biệt; }

td

,

th

{

padding

:

10px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về Cellspacing

& lt; /

h2

& gt;

& lt;

bảng

& gt;

& lt;

tr

& gt;

& lt;

th

& gt;

Tiêu đề

& lt; /

th

& gt;

& lt;

th

& gt;

Tiêu đề

& lt; /

th

& gt;

& lt; /

tr

& gt;

& lt;

tr

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt; /

tr

& gt;

& lt;

tr

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt; /

tr

& gt;

& lt; /

bảng

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

  1. Tạo kiểu cho & lt; bảng & gt ;, & lt; th & gt ;, & lt; tr & gt ;, và & lt; td & gt; các yếu tố và cung cấp các thuộc tính color , background-color text-align khi cần.

Ví dụ về tạo kiểu cho bảng:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

bảng

{

border-sập

: riêng biệt;

border-spacing

:

10px

;

background-color

:

# 1c87c9

; }

bảng

,

th

,

td

{

border

:

2px

solid

# aaa

;

text-align

: center; }

th

{

color

:

# fff

;

background-color

:

# 095484

;

padding

:

10px

; }

td

{

background-color

:

# eee

;

padding

:

20px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Ví dụ về Cellpadding và Cellspacing

& lt; /

h2

& gt;

& lt;

bảng

& gt;

& lt;

cái

& gt;

& lt;

tr

& gt;

& lt;

th

& gt;

Tiêu đề

& lt; /

th

& gt;

& lt;

th

& gt;

Tiêu đề

& lt; /

th

& gt;

& lt;

th

& gt;

Tiêu đề

& lt; /

th

& gt;

& lt;

th

& gt;

Tiêu đề

& lt; /

th

& gt;

& lt; /

tr

& gt;

& lt; /

cái

& gt;

& lt;

tbody

& gt;

& lt;

tr

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt; /

tr

& gt;

& lt;

tr

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt;

td

& gt;

Một số văn bản

& lt; /

td

& gt;

& lt; /

tr

& gt;

& lt; /

tbody

& gt;

& lt; /

bảng

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Kết quả

Ví dụ về Cellpadding và Cellspacing

Phần mở đầu
Phần mở đầu
Phần mở đầu
Phần mở đầu

Một số tiếp theo
Một số tiếp theo
Một số tiếp theo
Một số tiếp theo

Một số tiếp theo
Một số tiếp theo
Một số tiếp theo
Một số tiếp theo


Xem thêm những thông tin liên quan đến chủ đề khoảng cách ô và phần đệm

CÁCH VIẾT KHOẢNG CÁCH TRONG TIẾNG HÀN | 띄어쓰기 하는 법

  • Tác giả: Youngie Korean
  • Ngày đăng: 2021-08-23
  • Đánh giá: 4 ⭐ ( 5408 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 안 녕 하 세 요? 저 는 민 수 입 니 다. 한 국 어 를 공 부 합 니 다.
    Nếu ai còn đang viết tiếng Hàn với mỗi chữ một khoảng cách như thế này thì hãy cùng xem cách viết khoảng cách tiếng Hàn sao cho đúng nhé!!

Tiêu chuẩn ngành 22TCN 317:2003 Đệm tựa đầu sử dụng trên ô tô

  • Tác giả: luatvietnam.vn
  • Đánh giá: 5 ⭐ ( 3079 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tiêu chuẩn ngành 22TCN 317:2003 Phương tiện giao thông cơ giới đường bộ – Đệm tựa đầu sử dụng trên ô tô – Yêu cầu kỹ thuật và phương pháp thử

Html — Khoảng Cách Để Chèn Khoảng Trống Trong Html Css Là Gì?

  • Tác giả: caodangykhoatphcm.edu.vn
  • Đánh giá: 3 ⭐ ( 4002 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn cần sử dụng phần đệm trên các tdyếu tố của bạn , Một cái gì đó như thế này nên làm thủ thuật

Có nên mua đệm hơi ô tô không? Những sự thật cần phải biết

  • Tác giả: danchoioto.vn
  • Đánh giá: 3 ⭐ ( 7690 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đệm hơi ô tô mang đến không gian nằm, ngủ, nghỉ ngơi thoải mái trên những chuyến đi dài. Tuy nhiên cần cẩn trọng một số vấn đề sau.

Tự học về thuộc tính padding ( khoảng đệm) thật dễ dàng và nhanh chóng

  • Tác giả: giuseart.com
  • Đánh giá: 5 ⭐ ( 7875 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này mình sẽ giới thiệu một thuộc tính mới trong mô hình hộp của CSS, đó là thuộc tính padding(khoảng đệm trong CSS). Hãy theo dõi bài viết…

Khoảng cách giữa hai hàng trong một bảng?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 9296 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn cần sử dụng phần đệm trên các tdyếu tố của bạn . Một cái gì…

Bảng trong HTML(HTML tables)

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 4 ⭐ ( 4035 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách tạo bảng trong HTML, Cách chỉnh sửa một bảng trong HTML

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

Xem Thêm  Thẻ nội dung HTML: Nắm vững phần tử HTML quan trọng nhất hiện nay » - thẻ tập lệnh html trong nội dung

By ads_php