HTML Utopia: Designing Without Tables Using CSS- P11

HTML Utopia: Designing Without Tables Using CSS- P11: I’ve been around the Web for a while now some might say I’ve been here from the beginning. And one thing that always bothered me about the Web was its inherent inability to disentangle content from presentation. | The Table td Winner of Match 9 td tr First we set a background color on the td elements within tbody. While working on this element I added some left padding to move the tds away from the border and line them up with the headings File excerpt tbody td background e9ecee padding-left border-bottom 4px solid ccc Now let s create a rule for the tr elements that have a class of odd. We can set the background color on these rows File excerpt tbody background c4cfdb Now we can address the td elements within the tr class odd and tr tags giving them a color and background color that match those in our mockup File excerpt tbody td background f0f0f0 color 4f6480 If the selectors in these rules are starting to seem a bit confusing just remember to work from left to right 1. We have a table with a class of schedule which is in the CSS. 2. We then have the tbody element which sits inside the table. 3. Then we have a tr element to which we ll add a class of odd. 4. There are td elements within those trs. Figure shows the results of our work. 279 Licensed to siowchen@ Chapter 10 Fixed-width Layouts Figure . After styling the odd rows Finally let s style the links that appear in this table. There are two sets of links those in the row headings down the side of the table and those associated with the dates in the table cells. First we style the links within the th element File excerpt tbody tr th a link font-weight bold color 5e7796 text-decoration underline tbody tr th a visited font-weight bold color 5e7796 tbody tr th a hover font-weight bold color 5e7796 text-decoration none We then complete our table by styling the links within the td element 280 Licensed to siowchen@ Multiple-column Fixed-width Layouts File excerpt tbody td a link color

Không thể tạo bản xem trước, hãy bấm tải xuống
TÀI LIỆU MỚI ĐĂNG
Đã phát hiện trình chặn quảng cáo AdBlock
Trang web này phụ thuộc vào doanh thu từ số lần hiển thị quảng cáo để tồn tại. Vui lòng tắt trình chặn quảng cáo của bạn hoặc tạm dừng tính năng chặn quảng cáo cho trang web này.