Xin chào, hôm nay chúng ta sẽ nói về bảng và
làm thế nào bạn có thể sử dụng chúng để hiển thị dữ liệu của bạn trên trang web của bạn.
Vì vậy, tôi thích nói thế nào,
là chúng ta đã từng xem bảng là ý tưởng xấu xa này.
Bởi vì mọi người không sử dụng bàn vì lý do họ phải làm vậy.
Thay vào đó, họ sử dụng bàn để sắp xếp mọi thứ,
đặt chúng ra một cách độc đáo trên màn hình.
Điều này bắt đầu xảy ra trở lại trong thời gian HTML 2, có thể là HTML 3.1.
Và mọi người nói, tôi thực sự muốn trang của tôi trông đẹp và
tôi không có phương tiện để làm điều đó, vì vậy tôi sẽ làm cho nó một
cái bàn lớn và sắp xếp mọi thứ theo hàng hoặc cột khác nhau.
Điều này hoàn toàn ném ra toàn bộ ý tưởng tách nội dung từ bố cục.
Ngoài ra, nó làm cho nó thực sự khó hiểu cho những người có thể đang sử dụng
các thiết bị hỗ trợ, bởi vì họ đang tự hỏi, đây thực sự là tất cả một loạt các dữ liệu,
hoặc là có nội dung mà chỉ cần được loại định dạng theo cách thông thường.
Vậy chúng ta sẽ bắt đầu nói về bàn.
Và những gì tôi thực sự muốn làm là nhấn mạnh ý tưởng rằng bạn chỉ nên sử dụng
bảng nếu bạn có một số loại dữ liệu được hiển thị.
Bây giờ trước khi bạn bắt đầu mã hóa một thứ duy nhất,
tôi cần bạn phác thảo bố cục của bạn về những gì bảng của bạn sẽ trông như thế nào.
Bây giờ, tôi đã nói với học sinh của tôi điều này lặp đi lặp lại, và họ nói có, vâng, và
sau đó họ bắt đầu lập trình.
Và sau đó họ nói có, vâng, và sau đó họ bắt đầu lập trình.
Và, sau khoảng lần thứ tư hoặc thứ năm, họ nhận ra,
oh, nó dễ dàng hơn nhiều để viết mã sạch lần đầu tiên, hơn là sửa mã bị hỏng.
Và như vậy, sau đó họ bắt đầu và họ nghĩ, được rồi,
tôi thực sự cần bao nhiêu hàng và cột để đại diện cho tất cả dữ liệu của tôi?
Và sau đó bạn đi một bước xa hơn và nói, có bất kỳ hàng hoặc
cột nào mà tôi thực sự cần phải trải rộng nhiều ô, hoặc
những gì chúng ta gọi là các hộp nhỏ trong bảng?
Bởi vì nếu vậy, sẽ dễ dàng hơn nhiều nếu tôi rút ra điều này để tìm ra
nơi tôi sẽ cần bất kỳ thuộc tính đặc biệt nào để làm điều đó xảy ra.
Bởi vì một trong những điều quan trọng nhất cần biết khi bạn đang làm bảng là
trình duyệt mong đợi có cùng một số ô trên mỗi hàng.
Nếu anh không làm điều đó, nó sẽ trông rất lộn xộn.
Một khi bạn đã quyết định bảng của bạn sẽ trông như thế nào,
thì đó là thời gian để bắt đầu suy nghĩ về các thẻ.
Bạn bắt đầu với thẻ bảng và nó về cơ bản chỉ là một phần tử container mà
sẽ giữ tất cả các thuộc tính khác và tất cả các thẻ khác bên trong của nó.
Bạn sẽ có hàng bảng và sau đó ở đây cho td, Tôi có cột, nhưng
những gì tôi thực sự nghĩ rằng sẽ là tốt nhất là nghĩ về điều này như các tế bào bảng, không thực sự
cột vì những gì bạn đang làm là nói về từng hộp cá nhân.
Vì vậy, bên trong bảng, bạn sẽ có một hoặc nhiều hàng bảng.
Và sau đó bên trong mỗi hàng bảng, bạn sẽ có một hoặc nhiều yếu tố TD, vì vậy
các cột hoặc các tế bào.
Vì vậy, đây là mã để tạo ra một bảng rất đơn giản.
Mặc dù nó trông rất phức tạp và giống như có rất nhiều thứ đang diễn ra ở đây.
Hầu hết điều này chỉ là thông tin cho trình duyệt.
Khi chúng ta nhìn vào trang thực tế được tạo ra, bạn sẽ thấy rằng nó rất
sạch sẽ và đơn giản.
Vì vậy, tôi có mã
của tôi cho bảng của tôi ở bên ngoài và sau đó mỗi dòng mã của tôi ở đây là một hàng.
Tôi có bắt đầu tr của tôi và kết thúc tr của tôi.
Và sau đó bên trong mỗi hàng tôi có ba yếu tố, một, hai,
ba mà là bên trong thẻ td.
Và tôi sẽ nói với bạn ngay bây giờ rằng khi tôi ban đầu viết mã này Nó trông
ổn, nhưng tôi đã làm hỏng nó bởi vì tôi đã quên để đưa vào thẻ kết thúc của tôi.
Vì vậy, hãy chắc chắn khi bạn đang mã hóa những điều này, bạn đang rất sạch sẽ và súc tích.
Và nếu bạn làm điều đó một cách chính xác, điều này sẽ tạo ra một bảng đơn giản,
như tôi đã nói, với chín yếu tố trong đó.
Một, hai, ba, bốn, năm, sáu, bảy, tám, chín.
Điều này là đơn giản như bạn có thể nhận được, như xa như bảng đi.
Bây giờ trong một số trường hợp, bạn có thể muốn thêm những gì chúng tôi gọi là tiêu đề bảng vào mã của bạn. Đầu
đề bảng là ý tưởng rằng ở đầu mỗi cột, hoặc thậm chí ở đầu hoặc
đầu mỗi hàng, bạn có một số loại văn bản được in đậm, cho biết
đây không phải là dữ liệu, đây thực sự là tên của dữ liệu mà chúng ta đang xem xét.
Bây giờ nó tốt, tôi có nghĩa là nó không tốt, nhưng những gì một số người sẽ làm là họ sẽ
chỉ làm cho các yếu tố TD thông thường và có lẽ làm cho họ táo bạo.
Vì vậy, những người đang nhìn vào nó có thể nói, oh hey nhìn kìa.
Điều này được in đậm vì vậy nó phải quan trọng hơn.
Nhưng chúng tôi thực sự muốn tránh làm điều đó.
Thay vì sử dụng một TD với một số loại phông chữ đậm,
chúng tôi muốn sử dụng một thẻ ngữ nghĩa TH, viết tắt của tiêu đề bảng.
Vì vậy, ở đây ba dòng mã là chính xác giống như trước đây, nhưng
tôi đã thêm một hàng mới, nơi thay vì td tôi có thứ.
Vì vậy, tôi có hàng một, hàng hai, hàng ba, vv
Và những gì bạn có thể thấy ở đây là những gì chúng tôi nhận được là
một bảng nhỏ đẹp ở đầu mỗi bảng, đó là cả hai trực quan cho phép người dùng biết rằng đây là
những tiêu đề, nhưng cũng về mặt ngữ nghĩa truyền tải những thông tin tương tự.
Vì vậy, một trong những điều tôi đã đề cập trước đó, khi bạn đang thiết kế bàn của
bạn là bạn muốn quyết định nếu bạn sẽ được trải rộng nhiều tế bào.
Nó có thể là trường hợp mà
cái bàn bạn muốn làm không phải là một loại lưới hoàn hảo, hoặc hoàn hảo chín đến chín.
Vì vậy, bạn có thể kết hợp nhiều hàng và hoặc
nhiều cột bằng cách sử dụng các thuộc tính rowspan và cột khoảng.
Bên trong phần tử của bạn, bạn sẽ bao gồm rowspan bằng hai nếu bạn muốn trải rộng
hai hàng, hoặc cột khoảng bằng năm nếu bạn muốn có nó trải rộng năm cột.
Được rồi, để tôi đi trước và cho bạn xem một ví dụ với một số mã và một
lần nữa, tôi nhận ra rằng nếu bạn đang nhìn vào điều này trên một màn hình nhỏ bé mà điều này
có vẻ thực sự giống như rất nhiều thông tin để tiêu hóa.
Nhưng nó không thực sự nhiều như vậy xảy ra.
Tôi có một bảng đơn giản, nơi tôi có các tiêu đề bảng của tôi với Tên của đứa trẻ và
sau đó là Tên của cha mẹ.
Và sau đó tôi tiếp tục và tôi bắt đầu đưa vào một đứa trẻ, và
với mỗi đứa trẻ, tôi bao gồm cả cha mẹ chúng.
Vì vậy, ở đây, tôi có rowspan bằng hai cho Catherine,
có nghĩa là tôi thực sự muốn tế bào Catherine của tôi chiếm hai dòng.
Tương tự với phòng giam Edward.
Maggie tôi đã bỏ đi hoàn toàn một mình.
Vì vậy, chúng ta hãy chỉ đi và nhìn vào kết quả cuối cùng, và tôi nghĩ rằng đó thực sự là nếu
chúng ta chuỗi lạc hậu, nó sẽ giúp bạn hiểu những gì mã này đang làm.
Vì vậy, một lần nữa, tôi có tên của đứa trẻ và tên của cha mẹ, và
đây là hai ô mà tôi đã làm khoảng hàng.
Và bạn có thể thấy, nó thực sự chiếm nhiều hàng bởi vì trong trường hợp này,
Catherine và Edward đều có hai cha mẹ mà chúng tôi muốn kết hợp với nhau. Một
lần nữa, không phải là một khái niệm khó khăn, nhưng nó là trường hợp nếu bạn không nghĩ về
nó, và chúng tôi quay trở lại mã của bạn và chỉ bắt đầu ném rowspan và
columnspan trong, nó chỉ được rất lộn xộn và khó khăn hơn để gỡ lỗi.
Một trong những điều bạn có thể nhận thấy,
ở đầu bảng, tôi bao gồm một thuộc tính biên giới.
Lý do tôi làm điều đó là bởi vì tôi nghĩ rằng nó dễ
dàng hơn nhiều để xem rowspan này ở đây bởi vì tôi có các đường xung quanh mỗi ô.
Vì vậy, bạn có thể sử dụng thuộc tính biên giới để đi trước và
đặt các dòng ở giữa mỗi ô của bạn.
Và nó rất phổ biến để làm điều đó.
Nhưng, một lần nữa, trong HTML của bạn, tôi cố gắng tránh kiểu dáng.
Đó là một cái gì đó chúng ta có thể thêm sau nếu bạn quyết định tìm hiểu thêm về CSS.
Nhưng nó là một thuộc tính được sử dụng rất phổ biến, tôi muốn tiếp tục và
đặt nó vào đó để bạn có thể thấy những gì đang diễn ra.
Tiếp theo, chúng ta hãy nói về chú thích.
Vì vậy, làm thế nào để chúng ta liên kết văn bản với một bảng cụ thể?
Những gì mọi người thường làm là họ đặt vào một số loại tiêu đề, h2 hoặc h3 và
họ đặt nó ngay trên hoặc ngay dưới bảng.
Vì vậy, trực quan nếu bạn nhìn vào nó, bạn có thể hình dung ra, ồ,
điều này đi kèm với bàn.
Nhưng một lần nữa tôi thực sự muốn thúc đẩy bạn sử dụng thẻ ngữ nghĩa.
Vì vậy, thay vì làm điều đó, bạn có thể đi trước và
sử dụng thẻ chú thích bên trong bảng và
nó sẽ giúp mọi người biết rằng oh chú thích này đi với bảng cụ thể này.
Vì vậy, chúng ta hãy đi trước và xem xét.
Số một, bảng chỉ nên được sử dụng cho dữ liệu dạng bảng.
Đừng sử dụng nó để bố trí.
Hai, vẽ bảng của bạn trước khi bạn lập mã bảng của bạn.
Cuối cùng nó sẽ tiết kiệm cho anh rất nhiều nỗi đau, tôi hứa với anh điều đó.
Cuối cùng, và đây là điều thứ ba và quan trọng nhất tôi hy vọng bạn để lại với,
là bạn cần phải kiểm tra các thẻ không đóng.
Một trong những điều tuyệt vời về trình duyệt khi bạn đang phát triển
cục bộ, bạn đang gõ mã của bạn và bạn đang thử nghiệm và nhìn vào nó, là
trình duyệt của bạn thường có thể tìm ra những gì bạn muốn làm, ngay cả khi bạn rối tung.
Được rồi.
Và bảng là một ví dụ điển hình, nơi bạn có thể quên đóng một số thẻ,
nhưng trình duyệt của bạn loại biết bạn muốn làm gì.
Nhưng sau đó nếu bạn quyết định làm một bảng, và bạn sẽ tải lên nó, và
bạn thực sự cần phải chắc chắn rằng dữ liệu trong đó là hợp lệ và đại diện tốt.
Một trong những điều tồi tệ nhất bạn có thể làm là để thẻ của bạn được mở ra.
Vì vậy, hãy chắc chắn rằng bạn xác nhận mã của bạn,
bất cứ khi nào bạn viết một bảng hoặc thực sự bất cứ khi nào bạn viết bất kỳ mã.
Và bạn sẽ thực sự có thể chắc chắn rằng bạn đang viết mã tốt nhất mà bạn có thể.