Hướng dẫn html table cell height - chiều cao ô bảng html

Các bảng HTML có thể có các kích thước khác nhau cho mỗi cột, hàng hoặc toàn bộ bảng.

Sử dụng thuộc tính style với các thuộc tính width hoặc height để chỉ định kích thước của bảng, hàng hoặc cột.

Chiều rộng bảng HTML

Để đặt chiều rộng của bảng, hãy thêm thuộc tính style vào phần tử

Thí dụ

Đặt chiều rộng của bảng thành 100%:

& nbsp; & nbsp; & nbsp; & nbsp; FirstName & nbsp; & nbsp; & nbsp; LastName & nbsp; & nbsp; & nbsp; Tuổi & nbsp; & nbsp; & nbsp; & nbsp; Jill & nbsp; & nbsp; & nbsp; Smith & nbsp; & nbsp; & nbsp; 50 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Eve & nbsp; & nbsp; & nbsp; Jackson & nbsp; & nbsp; & nbsp; 94 & nbsp;
 

Hãy tự mình thử »

Lưu ý: Sử dụng tỷ lệ phần trăm làm đơn vị kích thước cho một chiều rộng có nghĩa là phần tử này sẽ được so sánh rộng như thế nào với phần tử cha của nó, trong trường hợp này là phần tử . Using a percentage as the size unit for a width means how wide will this element be compared to its parent element, which in this case is the element.

Chiều rộng cột bảng HTML

Để đặt kích thước của một cột cụ thể, hãy thêm thuộc tính style vào phần tử hoặc :

Thí dụ

Đặt chiều rộng của bảng thành 100%:

& nbsp; & nbsp; & nbsp; & nbsp; FirstName & nbsp; & nbsp; & nbsp; LastName & nbsp; & nbsp; & nbsp; Tuổi & nbsp; & nbsp; & nbsp; & nbsp; Jill & nbsp; & nbsp; & nbsp; Smith & nbsp; & nbsp; & nbsp; 50 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Eve & nbsp; & nbsp; & nbsp; Jackson & nbsp; & nbsp; & nbsp; 94 & nbsp;
 
    Firstname
    Lastname
    Age
 
 
    Jill
    Smith
    50
 
 
    Eve
    Jackson
    94
 

Hãy tự mình thử »

Lưu ý: Sử dụng tỷ lệ phần trăm làm đơn vị kích thước cho một chiều rộng có nghĩa là phần tử này sẽ được so sánh rộng như thế nào với phần tử cha của nó, trong trường hợp này là phần tử .

Chiều rộng cột bảng HTML

Thí dụ

Đặt chiều rộng của bảng thành 100%:

& nbsp; & nbsp; & nbsp; & nbsp; FirstName & nbsp; & nbsp; & nbsp; LastName & nbsp; & nbsp; & nbsp; Tuổi & nbsp; & nbsp; & nbsp; & nbsp; Jill & nbsp; & nbsp; & nbsp; Smith & nbsp; & nbsp; & nbsp; 50 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Eve & nbsp; & nbsp; & nbsp; Jackson & nbsp; & nbsp; & nbsp; 94 & nbsp;
 
    Firstname
    Lastname
    Age
 
 
    Jill
    Smith
    50
 
 
    Eve
    Jackson
    94
 

Hãy tự mình thử »

Lưu ý: Sử dụng tỷ lệ phần trăm làm đơn vị kích thước cho một chiều rộng có nghĩa là phần tử này sẽ được so sánh rộng như thế nào với phần tử cha của nó, trong trường hợp này là phần tử .

Chiều rộng cột bảng HTML

Exercise:

Để đặt kích thước của một cột cụ thể, hãy thêm thuộc tính style vào phần tử hoặc :

Đặt chiều rộng của cột đầu tiên thành 70%:
  
    First Name
    Last Name
    Points
  
  
    Jill
    Smith
    50
  

Chiều cao hàng bảng HTML

    

        
        
row1 column2
        
row1 column3
        
row1 column4
    

Kết quả Nếu chiều cao của IMG bằng 10px, chiều cao của tất cả các ô trong hàng đó bằng 10px. Thêm một đường viền vào kết quả của TD trong TD trông cao hơn sau đó là IMG. Lưu ý: IMG được chứa trong một vì tôi không muốn một đường viền xung quanh IMG, chỉ có TD.
If the height of the img is equal to 10px, the height of all cells in that row equals 10px. Adding a border to the td's results in the td's looking taller then the img. Note: the img is contained in a th because I do not want a border around the img, only the td's.

Kết quả mong muốn

Như được hiển thị trong hình trên, chiều cao của TD phải được điều chỉnh để các đường viền trên và dưới của chúng có thể được căn chỉnh với IMG.

Nghiên cứu sử dụng CSS để chỉ định chiều cao trên TD duy nhất hoạt động nếu chiều cao lớn hơn thì chiều cao của IMG [nói cách khác, TD không thể nhỏ hơn IMG]. Nghiên cứu bổ sung chỉ ra rằng đây chỉ là cách các bảng hoạt động.
Using CSS to specify a height on the td's only works if the height is larger then the height of the img [in other words, the td's cannot be smaller then the img]. Additional research indicates that this is just the way tables work.

Đã hỏi ngày 26 tháng 1 năm 2011 lúc 0:00Jan 26, 2011 at 0:00

3

Nói chung, trong một bảng, các phần tử đều có cùng kích thước trong một hàng, đó là mục đích của các hàng, bạn có thể căn chỉnh nội dung ô trong hàng, nhưng nếu không, hàng sẽ có chiều cao nhất quán. Chiều cao của hàng mặc định đến chiều cao tối đa của bất kỳ ô nào trong đó. Biên giới ngang chạy với các hàng nói chung.

Cách duy nhất để thay đổi điều này thực sự là sử dụng style2 với các hàng bổ sung được ném vào để định vị, nhưng điều đó là xấu xí trong cực đoan.

Hãy nhớ rằng các bảng chỉ dành cho dữ liệu bảng và thường nên tránh cho các mục đích khác, đặc biệt là bố cục.

Đã trả lời ngày 26 tháng 1 năm 2011 lúc 0:15Jan 26, 2011 at 0:15

OrbledorblingOrbling

20.2k3 Huy hiệu vàng53 Huy hiệu bạc64 Huy hiệu đồng3 gold badges53 silver badges64 bronze badges

Tôi không chắc mình hiểu, bạn muốn viền ở "bên trong" thay vì "bên ngoài"?

Điều này dễ dàng được thực hiện với CSS và style3, đặt âm style4 âm bằng với style5.

Có lý do gì bạn đang sử dụng style6s không?

Đã trả lời ngày 26 tháng 1 năm 2011 lúc 16:58Jan 26, 2011 at 16:58

Dirk Digglerdirk DigglerDirk Diggler

8531 Huy hiệu vàng10 Huy hiệu bạc22 Huy hiệu đồng1 gold badge10 silver badges22 bronze badges