Đang chuẩn bị liên kết để tải về tài liệu:
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 fixedwidth.css excerpt table.schedule tbody td background e9ecee padding-left 0.6em 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 fixedwidth.css excerpt table.schedule tbody tr.odd 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 fixedwidth.css excerpt table.schedule tbody tr.odd 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 table.schedule 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 10.13 shows the results of our work. 279 Licensed to siowchen@darke.biz Chapter 10 Fixed-width Layouts Figure 10.13. 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 fixedwidth.css excerpt table.schedule tbody tr th a link font-weight bold color 5e7796 text-decoration underline table.schedule tbody tr th a visited font-weight bold color 5e7796 table.schedule 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@darke.biz Multiple-column Fixed-width Layouts File fixedwidth.css excerpt table.schedule tbody td a link color