Css toàn cầu trong góc

Tạo kiểu cho bảng HTML không phải là công việc hấp dẫn nhất trên thế giới, nhưng đôi khi tất cả chúng ta đều phải làm điều đó. Bài viết này cung cấp hướng dẫn để làm cho các bảng HTML trông đẹp mắt, với một số kỹ thuật tạo kiểu bảng cụ thể được làm nổi bật

Show
    điều kiện tiên quyết. Khái niệm cơ bản về HTML (nghiên cứu Giới thiệu về HTML), kiến ​​thức về các bảng HTML và ý tưởng về cách thức hoạt động của CSS (nghiên cứu các bước đầu tiên về CSS. )Khách quan. Để tìm hiểu cách tạo kiểu bảng HTML hiệu quả

    Hãy bắt đầu bằng cách xem một bảng HTML điển hình. Chà, tôi nói điển hình — hầu hết các ví dụ về bảng HTML là về giày dép, thời tiết hoặc nhân viên; . Đánh dấu trông giống như vậy

    <table>
      <caption>
        A summary of the UK's most famous punk bands
      caption>
      <thead>
        <tr>
          <th scope="col">Bandth>
          <th scope="col">Year formedth>
          <th scope="col">No. of Albumsth>
          <th scope="col">Most famous songth>
        tr>
      thead>
      <tbody>
        <tr>
          <th scope="row">Buzzcocksth>
          <td>1976td>
          <td>9td>
          <td>Ever fallen in love (with someone you shouldn't've)td>
        tr>
        <tr>
          <th scope="row">The Clashth>
          <td>1976td>
          <td>6td>
          <td>London Callingtd>
        tr>
    
        
    
        <tr>
          <th scope="row">The Stranglersth>
          <td>1974td>
          <td>17td>
          <td>No More Heroestd>
        tr>
      tbody>
      <tfoot>
        <tr>
          <th scope="row" colspan="2">Total albumsth>
          <td colspan="2">77td>
        tr>
      tfoot>
    table>
    

    Bảng được đánh dấu đẹp mắt, dễ tạo kiểu và có thể truy cập nhờ các tính năng như,

    ,
    <link href="style.css" rel="stylesheet" />
    
    0,
    <link href="style.css" rel="stylesheet" />
    
    1, v.v. Thật không may, nó trông không đẹp khi hiển thị trên màn hình (xem trực tiếp tại punk-band-unstyled. html)

    Css toàn cầu trong góc

    Chỉ với kiểu dáng trình duyệt mặc định, nó trông chật chội, khó đọc và nhàm chán. Chúng tôi cần sử dụng một số CSS để sửa lỗi này

    Hãy cùng nhau tạo kiểu cho ví dụ bảng của chúng ta

    1. Để bắt đầu, hãy tạo một bản sao cục bộ của đánh dấu mẫu, tải xuống cả hai hình ảnh (nhiễu và da báo) và đặt ba tệp kết quả vào một thư mục đang hoạt động ở đâu đó trên máy tính cục bộ của bạn
    2. Tiếp theo, tạo một tệp mới có tên là
      <link href="style.css" rel="stylesheet" />
      
      2 và lưu nó vào cùng thư mục với các tệp khác của bạn
    3. Liên kết CSS với HTML bằng cách đặt dòng HTML sau vào bên trong
      <link href="style.css" rel="stylesheet" />
      
      3 của bạn

      <link href="style.css" rel="stylesheet" />
      

    Điều đầu tiên chúng ta cần làm là sắp xếp khoảng cách/bố cục - kiểu dáng bảng mặc định rất chật chội. Để thực hiện việc này, hãy thêm CSS sau vào tệp

    <link href="style.css" rel="stylesheet" />
    
    2 của bạn

    /* spacing */
    
    table {
      table-layout: fixed;
      width: 100%;
      border-collapse: collapse;
      border: 3px solid purple;
    }
    
    thead th:nth-child(1) {
      width: 30%;
    }
    
    thead th:nth-child(2) {
      width: 20%;
    }
    
    thead th:nth-child(3) {
      width: 15%;
    }
    
    thead th:nth-child(4) {
      width: 35%;
    }
    
    th,
    td {
      padding: 20px;
    }
    

    Các phần quan trọng nhất cần lưu ý như sau

    • Giá trị
      <link href="style.css" rel="stylesheet" />
      
      5 của
      <link href="style.css" rel="stylesheet" />
      
      6 thường là một ý tưởng hay để đặt trên bảng của bạn, vì nó làm cho bảng hoạt động dễ đoán hơn một chút theo mặc định. Thông thường, các cột trong bảng có xu hướng được định kích thước tùy theo lượng nội dung mà chúng chứa, điều này tạo ra một số kết quả lạ. Với
      <link href="style.css" rel="stylesheet" />
      
      7, bạn có thể định cỡ các cột của mình theo độ rộng của tiêu đề và sau đó xử lý nội dung của chúng khi thích hợp. Đây là lý do tại sao chúng tôi đã chọn bốn tiêu đề khác nhau với bộ chọn
      <link href="style.css" rel="stylesheet" />
      
      8 (
      <link href="style.css" rel="stylesheet" />
      
      9) ("Chọn phần tử con thứ n là phần tử
      /* spacing */
      
      table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 3px solid purple;
      }
      
      thead th:nth-child(1) {
        width: 30%;
      }
      
      thead th:nth-child(2) {
        width: 20%;
      }
      
      thead th:nth-child(3) {
        width: 15%;
      }
      
      thead th:nth-child(4) {
        width: 35%;
      }
      
      th,
      td {
        padding: 20px;
      }
      
      0 trong một chuỗi, bên trong phần tử
      <link href="style.css" rel="stylesheet" />
      
      0") và cho chúng đặt độ rộng phần trăm. Toàn bộ chiều rộng của cột tuân theo chiều rộng của tiêu đề, tạo nên một cách hay để định kích thước cho các cột trong bảng của bạn. Chris Coyier thảo luận chi tiết hơn về kỹ thuật này trong Bố cục bảng cố định. Chúng tôi đã kết hợp điều này với
      /* spacing */
      
      table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 3px solid purple;
      }
      
      thead th:nth-child(1) {
        width: 30%;
      }
      
      thead th:nth-child(2) {
        width: 20%;
      }
      
      thead th:nth-child(3) {
        width: 15%;
      }
      
      thead th:nth-child(4) {
        width: 35%;
      }
      
      th,
      td {
        padding: 20px;
      }
      
      2 là 100%, nghĩa là bảng sẽ lấp đầy bất kỳ vùng chứa nào mà nó được đặt vào và phản hồi tốt (mặc dù vẫn cần thêm một số công việc để làm cho bảng trông đẹp mắt trên màn hình có chiều rộng hẹp)
    • Giá trị
      /* spacing */
      
      table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 3px solid purple;
      }
      
      thead th:nth-child(1) {
        width: 30%;
      }
      
      thead th:nth-child(2) {
        width: 20%;
      }
      
      thead th:nth-child(3) {
        width: 15%;
      }
      
      thead th:nth-child(4) {
        width: 35%;
      }
      
      th,
      td {
        padding: 20px;
      }
      
      3 của
      /* spacing */
      
      table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 3px solid purple;
      }
      
      thead th:nth-child(1) {
        width: 30%;
      }
      
      thead th:nth-child(2) {
        width: 20%;
      }
      
      thead th:nth-child(3) {
        width: 15%;
      }
      
      thead th:nth-child(4) {
        width: 35%;
      }
      
      th,
      td {
        padding: 20px;
      }
      
      4 là phương pháp hay nhất tiêu chuẩn cho bất kỳ nỗ lực tạo kiểu bảng nào. Theo mặc định, khi bạn đặt đường viền cho các phần tử bảng, tất cả chúng sẽ có khoảng cách giữa chúng, như hình minh họa bên dưới.
      Css toàn cầu trong góc
      Giao diện này trông không đẹp lắm (mặc dù đó có thể là giao diện bạn muốn, ai biết được?). Khi đặt
      /* spacing */
      
      table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 3px solid purple;
      }
      
      thead th:nth-child(1) {
        width: 30%;
      }
      
      thead th:nth-child(2) {
        width: 20%;
      }
      
      thead th:nth-child(3) {
        width: 15%;
      }
      
      thead th:nth-child(4) {
        width: 35%;
      }
      
      th,
      td {
        padding: 20px;
      }
      
      5, các đường viền thu gọn thành một, trông đẹp hơn nhiều.
      Css toàn cầu trong góc
    • Chúng tôi đã đặt một
      /* spacing */
      
      table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 3px solid purple;
      }
      
      thead th:nth-child(1) {
        width: 30%;
      }
      
      thead th:nth-child(2) {
        width: 20%;
      }
      
      thead th:nth-child(3) {
        width: 15%;
      }
      
      thead th:nth-child(4) {
        width: 35%;
      }
      
      th,
      td {
        padding: 20px;
      }
      
      6 xung quanh toàn bộ bảng, điều này là cần thiết vì chúng tôi sẽ đặt một số đường viền xung quanh đầu trang và chân trang của bảng sau này - nó trông thực sự kỳ quặc và rời rạc khi bạn không có đường viền bao quanh toàn bộ bên ngoài của bảng
    • Chúng tôi đã đặt một số
      /* spacing */
      
      table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 3px solid purple;
      }
      
      thead th:nth-child(1) {
        width: 30%;
      }
      
      thead th:nth-child(2) {
        width: 20%;
      }
      
      thead th:nth-child(3) {
        width: 15%;
      }
      
      thead th:nth-child(4) {
        width: 35%;
      }
      
      th,
      td {
        padding: 20px;
      }
      
      7 trên các phần tử
      /* spacing */
      
      table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 3px solid purple;
      }
      
      thead th:nth-child(1) {
        width: 30%;
      }
      
      thead th:nth-child(2) {
        width: 20%;
      }
      
      thead th:nth-child(3) {
        width: 15%;
      }
      
      thead th:nth-child(4) {
        width: 35%;
      }
      
      th,
      td {
        padding: 20px;
      }
      
      0 và
      /* spacing */
      
      table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 3px solid purple;
      }
      
      thead th:nth-child(1) {
        width: 30%;
      }
      
      thead th:nth-child(2) {
        width: 20%;
      }
      
      thead th:nth-child(3) {
        width: 15%;
      }
      
      thead th:nth-child(4) {
        width: 35%;
      }
      
      th,
      td {
        padding: 20px;
      }
      
      9 — điều này mang lại cho các mục dữ liệu một số không gian để thở, làm cho bảng trông dễ đọc hơn rất nhiều

    Tại thời điểm này, bảng của chúng tôi đã trông đẹp hơn rất nhiều

    Css toàn cầu trong góc

    Bây giờ chúng tôi sẽ sắp xếp văn bản của chúng tôi một chút

    Trước hết, chúng tôi đã tìm thấy một phông chữ trên Google Fonts phù hợp cho bảng về các ban nhạc punk. Bạn có thể đến đó và tìm một cái khác nếu bạn thích;

    Đầu tiên, thêm phần tử

    <link
      href="https://fonts.googleapis.com/css?family=Rock+Salt"
      rel="stylesheet"
      type="text/css" />
    
    0 sau vào phần đầu HTML của bạn, ngay phía trên phần tử
    <link
      href="https://fonts.googleapis.com/css?family=Rock+Salt"
      rel="stylesheet"
      type="text/css" />
    
    0 hiện tại của bạn

    <link
      href="https://fonts.googleapis.com/css?family=Rock+Salt"
      rel="stylesheet"
      type="text/css" />
    

    Bây giờ, hãy thêm CSS sau vào tệp

    <link href="style.css" rel="stylesheet" />
    
    2 của bạn, bên dưới phần bổ sung trước đó

    /* typography */
    
    html {
      font-family: "helvetica neue", helvetica, arial, sans-serif;
    }
    
    thead th,
    tfoot th {
      font-family: "Rock Salt", cursive;
    }
    
    th {
      letter-spacing: 2px;
    }
    
    td {
      letter-spacing: 1px;
    }
    
    tbody td {
      text-align: center;
    }
    
    tfoot th {
      text-align: right;
    }
    

    Không có gì thực sự cụ thể cho các bảng ở đây;

    • Chúng tôi đã đặt một ngăn xếp phông chữ sans-serif toàn cầu; . Chúng tôi cũng đã đặt phông chữ tùy chỉnh của mình trên các tiêu đề bên trong các phần tử
      <link href="style.css" rel="stylesheet" />
      
      0 và
      <link
        href="https://fonts.googleapis.com/css?family=Rock+Salt"
        rel="stylesheet"
        type="text/css" />
      
      6, để có giao diện đẹp mắt, bụi bặm
    • Chúng tôi đã đặt một số
      <link
        href="https://fonts.googleapis.com/css?family=Rock+Salt"
        rel="stylesheet"
        type="text/css" />
      
      7 trên các tiêu đề và ô, vì chúng tôi cảm thấy nó giúp dễ đọc. Một lần nữa, chủ yếu là một sự lựa chọn phong cách
    • Chúng tôi đã căn giữa văn bản trong các ô của bảng bên trong
      <link href="style.css" rel="stylesheet" />
      
      1 để chúng thẳng hàng với các tiêu đề. Theo mặc định, các ô được cung cấp một giá trị
      <link
        href="https://fonts.googleapis.com/css?family=Rock+Salt"
        rel="stylesheet"
        type="text/css" />
      
      9 của
      /* typography */
      
      html {
        font-family: "helvetica neue", helvetica, arial, sans-serif;
      }
      
      thead th,
      tfoot th {
        font-family: "Rock Salt", cursive;
      }
      
      th {
        letter-spacing: 2px;
      }
      
      td {
        letter-spacing: 1px;
      }
      
      tbody td {
        text-align: center;
      }
      
      tfoot th {
        text-align: right;
      }
      
      0 và các tiêu đề được cung cấp một giá trị là
      /* typography */
      
      html {
        font-family: "helvetica neue", helvetica, arial, sans-serif;
      }
      
      thead th,
      tfoot th {
        font-family: "Rock Salt", cursive;
      }
      
      th {
        letter-spacing: 2px;
      }
      
      td {
        letter-spacing: 1px;
      }
      
      tbody td {
        text-align: center;
      }
      
      tfoot th {
        text-align: right;
      }
      
      1, nhưng nhìn chung sẽ tốt hơn nếu đặt các sắp xếp giống nhau cho cả hai. Trọng lượng đậm mặc định trên các phông chữ tiêu đề là đủ để phân biệt giao diện của chúng
    • Chúng tôi đã căn phải tiêu đề bên trong
      <link
        href="https://fonts.googleapis.com/css?family=Rock+Salt"
        rel="stylesheet"
        type="text/css" />
      
      6 để nó được liên kết trực quan tốt hơn với điểm dữ liệu của nó

    Kết quả trông gọn gàng hơn một chút

    Css toàn cầu trong góc

    Bây giờ vào đồ họa và màu sắc. Bởi vì chiếc bàn đầy chất punk và thái độ, chúng tôi cần tạo cho nó một số kiểu dáng ấn tượng tươi sáng để phù hợp với nó. Đừng lo lắng, bạn không cần phải làm cho bàn của mình ồn ào như vậy — bạn có thể chọn thứ gì đó tinh tế và trang nhã hơn

    Bắt đầu bằng cách thêm CSS sau vào tệp

    <link href="style.css" rel="stylesheet" />
    
    2 của bạn, một lần nữa ở dưới cùng

    /* graphics and colors */
    
    thead,
    tfoot {
      background: url(leopardskin.jpg);
      color: white;
      text-shadow: 1px 1px 1px black;
    }
    
    thead th,
    tfoot th,
    tfoot td {
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.5)
      );
      border: 3px solid purple;
    }
    

    Một lần nữa, không có gì cụ thể cho các bảng ở đây, nhưng đáng để lưu ý một số điều

    Chúng tôi đã thêm

    /* typography */
    
    html {
      font-family: "helvetica neue", helvetica, arial, sans-serif;
    }
    
    thead th,
    tfoot th {
      font-family: "Rock Salt", cursive;
    }
    
    th {
      letter-spacing: 2px;
    }
    
    td {
      letter-spacing: 1px;
    }
    
    tbody td {
      text-align: center;
    }
    
    tfoot th {
      text-align: right;
    }
    
    4 vào
    <link href="style.css" rel="stylesheet" />
    
    0 và
    <link
      href="https://fonts.googleapis.com/css?family=Rock+Salt"
      rel="stylesheet"
      type="text/css" />
    
    6, đồng thời thay đổi
    /* typography */
    
    html {
      font-family: "helvetica neue", helvetica, arial, sans-serif;
    }
    
    thead th,
    tfoot th {
      font-family: "Rock Salt", cursive;
    }
    
    th {
      letter-spacing: 2px;
    }
    
    td {
      letter-spacing: 1px;
    }
    
    tbody td {
      text-align: center;
    }
    
    tfoot th {
      text-align: right;
    }
    
    7 của tất cả văn bản bên trong đầu trang và chân trang thành màu trắng (và đặt tên là
    /* typography */
    
    html {
      font-family: "helvetica neue", helvetica, arial, sans-serif;
    }
    
    thead th,
    tfoot th {
      font-family: "Rock Salt", cursive;
    }
    
    th {
      letter-spacing: 2px;
    }
    
    td {
      letter-spacing: 1px;
    }
    
    tbody td {
      text-align: center;
    }
    
    tfoot th {
      text-align: right;
    }
    
    8) để có thể đọc được. Bạn phải luôn đảm bảo rằng văn bản của bạn tương phản tốt với nền để có thể đọc được

    Chúng tôi cũng đã thêm một dải màu tuyến tính cho các phần tử

    /* spacing */
    
    table {
      table-layout: fixed;
      width: 100%;
      border-collapse: collapse;
      border: 3px solid purple;
    }
    
    thead th:nth-child(1) {
      width: 30%;
    }
    
    thead th:nth-child(2) {
      width: 20%;
    }
    
    thead th:nth-child(3) {
      width: 15%;
    }
    
    thead th:nth-child(4) {
      width: 35%;
    }
    
    th,
    td {
      padding: 20px;
    }
    
    0 và
    /* spacing */
    
    table {
      table-layout: fixed;
      width: 100%;
      border-collapse: collapse;
      border: 3px solid purple;
    }
    
    thead th:nth-child(1) {
      width: 30%;
    }
    
    thead th:nth-child(2) {
      width: 20%;
    }
    
    thead th:nth-child(3) {
      width: 15%;
    }
    
    thead th:nth-child(4) {
      width: 35%;
    }
    
    th,
    td {
      padding: 20px;
    }
    
    9 bên trong đầu trang và chân trang để có một chút họa tiết đẹp mắt, cũng như tạo cho các phần tử đó một đường viền màu tím sáng. Sẽ rất hữu ích khi có sẵn nhiều phần tử lồng nhau để bạn có thể xếp các kiểu chồng lên nhau. Có, chúng tôi có thể đã đặt cả hình nền và độ dốc tuyến tính trên các phần tử
    <link href="style.css" rel="stylesheet" />
    
    0 và
    <link
      href="https://fonts.googleapis.com/css?family=Rock+Salt"
      rel="stylesheet"
      type="text/css" />
    
    6 bằng cách sử dụng nhiều hình nền, nhưng chúng tôi đã quyết định làm điều đó một cách riêng biệt vì lợi ích của các trình duyệt cũ không hỗ trợ nhiều hình nền hoặc độ dốc tuyến tính

    sọc ngựa vằn

    Chúng tôi muốn dành một phần riêng để chỉ cho bạn cách triển khai các sọc ngựa vằn — xen kẽ các hàng màu giúp các hàng dữ liệu khác nhau trong bảng của bạn dễ phân tích và đọc hơn. Thêm CSS sau vào cuối tệp

    <link href="style.css" rel="stylesheet" />
    
    2 của bạn

    /* zebra striping */
    
    tbody tr:nth-child(odd) {
      background-color: #ff33cc;
    }
    
    tbody tr:nth-child(even) {
      background-color: #e495e4;
    }
    
    tbody tr {
      background-image: url(noise.png);
    }
    
    table {
      background-color: #ff33cc;
    }
    

    • Trước đó, bạn đã thấy bộ chọn
      <link href="style.css" rel="stylesheet" />
      
      9 được sử dụng để chọn các phần tử con cụ thể. Nó cũng có thể được cung cấp một công thức làm tham số, vì vậy nó sẽ chọn một chuỗi các phần tử. Công thức
      /* graphics and colors */
      
      thead,
      tfoot {
        background: url(leopardskin.jpg);
        color: white;
        text-shadow: 1px 1px 1px black;
      }
      
      thead th,
      tfoot th,
      tfoot td {
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.1),
          rgba(0, 0, 0, 0.5)
        );
        border: 3px solid purple;
      }
      
      5 sẽ chọn tất cả các con số lẻ (1, 3, 5, v.v. ) và công thức
      /* graphics and colors */
      
      thead,
      tfoot {
        background: url(leopardskin.jpg);
        color: white;
        text-shadow: 1px 1px 1px black;
      }
      
      thead th,
      tfoot th,
      tfoot td {
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.1),
          rgba(0, 0, 0, 0.5)
        );
        border: 3px solid purple;
      }
      
      6 sẽ chọn tất cả các con số chẵn (2, 4, 6, v.v. ) Chúng tôi đã sử dụng các từ khóa
      /* graphics and colors */
      
      thead,
      tfoot {
        background: url(leopardskin.jpg);
        color: white;
        text-shadow: 1px 1px 1px black;
      }
      
      thead th,
      tfoot th,
      tfoot td {
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.1),
          rgba(0, 0, 0, 0.5)
        );
        border: 3px solid purple;
      }
      
      7 và
      /* graphics and colors */
      
      thead,
      tfoot {
        background: url(leopardskin.jpg);
        color: white;
        text-shadow: 1px 1px 1px black;
      }
      
      thead th,
      tfoot th,
      tfoot td {
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.1),
          rgba(0, 0, 0, 0.5)
        );
        border: 3px solid purple;
      }
      
      8 trong mã của mình, các từ khóa này thực hiện chính xác những điều tương tự như các công thức đã nói ở trên. Trong trường hợp này, chúng tôi đang cung cấp cho các hàng chẵn và lẻ các màu khác nhau (nhạt)
    • Chúng tôi cũng đã thêm một ô nền lặp lại cho tất cả các hàng nội dung, đây chỉ là một chút nhiễu (một
      /* graphics and colors */
      
      thead,
      tfoot {
        background: url(leopardskin.jpg);
        color: white;
        text-shadow: 1px 1px 1px black;
      }
      
      thead th,
      tfoot th,
      tfoot td {
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.1),
          rgba(0, 0, 0, 0.5)
        );
        border: 3px solid purple;
      }
      
      9 bán trong suốt với một chút biến dạng hình ảnh trên đó) để cung cấp một số kết cấu
    • Cuối cùng, chúng tôi đã cung cấp cho toàn bộ bảng một màu nền đồng nhất để các trình duyệt không hỗ trợ bộ chọn
      <link href="style.css" rel="stylesheet" />
      
      9 vẫn có nền cho các hàng nội dung của chúng

    Vụ nổ màu này dẫn đến cái nhìn sau đây

    Css toàn cầu trong góc

    Bây giờ, điều này có thể hơi quá và không hợp khẩu vị của bạn, nhưng điểm mà chúng tôi đang cố gắng thực hiện ở đây là các bảng biểu không nhất thiết phải nhàm chán và hàn lâm

    Còn một việc cuối cùng cần làm với bảng của chúng ta — tạo kiểu cho chú thích. Để thực hiện việc này, hãy thêm phần sau vào cuối tệp

    <link href="style.css" rel="stylesheet" />
    
    2 của bạn

    /* caption */
    
    caption {
      font-family: "Rock Salt", cursive;
      padding: 20px;
      font-style: italic;
      caption-side: bottom;
      color: #666;
      text-align: right;
      letter-spacing: 1px;
    }
    

    Không có gì đáng chú ý ở đây, ngoại trừ tài sản

    /* zebra striping */
    
    tbody tr:nth-child(odd) {
      background-color: #ff33cc;
    }
    
    tbody tr:nth-child(even) {
      background-color: #e495e4;
    }
    
    tbody tr {
      background-image: url(noise.png);
    }
    
    table {
      background-color: #ff33cc;
    }
    
    2, đã được định giá là
    /* zebra striping */
    
    tbody tr:nth-child(odd) {
      background-color: #ff33cc;
    }
    
    tbody tr:nth-child(even) {
      background-color: #e495e4;
    }
    
    tbody tr {
      background-image: url(noise.png);
    }
    
    table {
      background-color: #ff33cc;
    }
    
    3. Điều này làm cho chú thích được định vị ở cuối bảng, cùng với các khai báo khác mang lại cho chúng ta cái nhìn cuối cùng này (xem trực tiếp tại punk-bands-complete. html)

    Css toàn cầu trong góc

    Trước khi tiếp tục, chúng tôi nghĩ rằng chúng tôi sẽ cung cấp cho bạn một danh sách nhanh các điểm hữu ích nhất được minh họa ở trên

    • Hãy đánh dấu bảng của bạn đơn giản nhất có thể và giữ cho mọi thứ linh hoạt, e. g. bằng cách sử dụng tỷ lệ phần trăm, vì vậy thiết kế phản hồi nhanh hơn
    • Sử dụng
      <link href="style.css" rel="stylesheet" />
      
      5
      /* zebra striping */
      
      tbody tr:nth-child(odd) {
        background-color: #ff33cc;
      }
      
      tbody tr:nth-child(even) {
        background-color: #e495e4;
      }
      
      tbody tr {
        background-image: url(noise.png);
      }
      
      table {
        background-color: #ff33cc;
      }
      
      5 để tạo bố cục bảng dễ đoán hơn, cho phép bạn dễ dàng đặt độ rộng cột bằng cách đặt
      /* spacing */
      
      table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 3px solid purple;
      }
      
      thead th:nth-child(1) {
        width: 30%;
      }
      
      thead th:nth-child(2) {
        width: 20%;
      }
      
      thead th:nth-child(3) {
        width: 15%;
      }
      
      thead th:nth-child(4) {
        width: 35%;
      }
      
      th,
      td {
        padding: 20px;
      }
      
      2 trên tiêu đề của chúng (
      /* spacing */
      
      table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 3px solid purple;
      }
      
      thead th:nth-child(1) {
        width: 30%;
      }
      
      thead th:nth-child(2) {
        width: 20%;
      }
      
      thead th:nth-child(3) {
        width: 15%;
      }
      
      thead th:nth-child(4) {
        width: 35%;
      }
      
      th,
      td {
        padding: 20px;
      }
      
      0)
    • Sử dụng
      /* spacing */
      
      table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 3px solid purple;
      }
      
      thead th:nth-child(1) {
        width: 30%;
      }
      
      thead th:nth-child(2) {
        width: 20%;
      }
      
      thead th:nth-child(3) {
        width: 15%;
      }
      
      thead th:nth-child(4) {
        width: 35%;
      }
      
      th,
      td {
        padding: 20px;
      }
      
      3_______50_______9 để làm cho các đường viền của các thành phần bảng thu gọn vào nhau, tạo ra giao diện gọn gàng và dễ kiểm soát hơn
    • Sử dụng
      <link href="style.css" rel="stylesheet" />
      
      0,
      <link href="style.css" rel="stylesheet" />
      
      1 và
      <link
        href="https://fonts.googleapis.com/css?family=Rock+Salt"
        rel="stylesheet"
        type="text/css" />
      
      6 để chia bảng của bạn thành các phần hợp lý và cung cấp các vị trí bổ sung để áp dụng CSS, do đó, việc xếp các kiểu chồng lên nhau sẽ dễ dàng hơn nếu cần
    • Sử dụng sọc vằn để làm cho các hàng thay thế dễ đọc hơn
    • Sử dụng
      <link
        href="https://fonts.googleapis.com/css?family=Rock+Salt"
        rel="stylesheet"
        type="text/css" />
      
      9 để sắp xếp văn bản
      /* spacing */
      
      table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 3px solid purple;
      }
      
      thead th:nth-child(1) {
        width: 30%;
      }
      
      thead th:nth-child(2) {
        width: 20%;
      }
      
      thead th:nth-child(3) {
        width: 15%;
      }
      
      thead th:nth-child(4) {
        width: 35%;
      }
      
      th,
      td {
        padding: 20px;
      }
      
      0 và
      /* spacing */
      
      table {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
        border: 3px solid purple;
      }
      
      thead th:nth-child(1) {
        width: 30%;
      }
      
      thead th:nth-child(2) {
        width: 20%;
      }
      
      thead th:nth-child(3) {
        width: 15%;
      }
      
      thead th:nth-child(4) {
        width: 35%;
      }
      
      th,
      td {
        padding: 20px;
      }
      
      9 của bạn, để làm cho mọi thứ gọn gàng và dễ theo dõi hơn

    Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . Những cái bàn

    Với các bảng tạo kiểu hiện đang ở phía sau chúng tôi, chúng tôi cần một cái gì đó khác để chiếm thời gian của chúng tôi. Bài viết tiếp theo khám phá cách gỡ lỗi CSS — cách giải quyết các sự cố chẳng hạn như bố cục trông không giống như mong muốn hoặc các thuộc tính không được áp dụng khi bạn cho rằng chúng nên được áp dụng. Điều này bao gồm thông tin về cách sử dụng DevTools của trình duyệt để tìm giải pháp cho sự cố của bạn