tables

這是一份有關如何使用CSS處理表格的簡要指南。 在過去，我們通常過度使用表格來創建華麗的頁面佈局，因為它們是唯一的選擇之一。 如今，隨著Grid和Flexbox的出現，我們可以讓表格回到它原本的作用：樣式設定。 讓我們從HTML開始。這是一個基本的表格： <table> <thead> <tr> <th scope="col">姓名</th> <th scope="col">年齡</th> </tr> </thead> <tbody> <tr> <th scope="row">Flavio</th> <td>36</td> </tr> <tr> <th scope="row">Roger</th> <td>7</td> </tr> </tbody> </table> 默認情況下，這個表格看起來並不太吸引人。瀏覽器只提供了一些標準的樣式： 當然，我們可以使用CSS來調整表格的所有元素。 讓我們從邊框開始。一個漂亮的邊框可以讓表格大有不同。 我們可以對table元素以及th和td等內部元素應用邊框樣式： table, th, td { border: 1px solid #333; } 如果加上一些外邊距，我們會得到一個漂亮的效果： 表格中常見的一個特點是可以為一行添加顏色，並為另一行添加不同的顏色。這可以使用nth-child(odd)或nth-child(even)選擇器實現： tbody tr:nth-child(odd) { background-color: #af47ff; } 這將給我們帶來以下效果： 如果在表格元素中添加border-collapse: collapse;，則所有邊框將合併為一個：

一種在移動設備上以美觀方式顯示表格的實用方法 幾天前，我通過Google 搜索控制台收到了一個警告。它在我有一個大表格的頁面上檢測到了移動端可用性問題。 這是給我帶來問題的表格： 在移動設備上，它的渲染效果相當差： 這不是一種良好的用戶體驗，也是Google 搜索控制台上的問題。如果有什麼我不希望看到的就是這樣一個錯誤/警告。尤其還是我能解決的問題。 我使用的靜態網站生成器Hugo允許我將特定於單個頁面的CSS代碼注入，只需將<style>標籤添加到Markdown文件中即可。非常方便。 因此，我開始尋找一個很好的方法來使我的表格具有響應性。我找到了這篇非常好的CSS Tricks文章：Responsive Data Tables。它來自2011年，但仍然適用！ 這個技巧是這樣的：我們希望將表格顯示為塊元素，而不是傳統CSS意義上的表格。我們通過將所有表格標題移到視圖之外，然後在表格中插入一個新的塊元素，每行都有自己的標題，就像這樣： 以下是實現上述設計的代碼： @media only screen and (max-width: 1500px) { table, thead, tbody, th, td, tr { display: block; } thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 200px; margin-left: 150px; } td:before { position: absolute; top: 12px; left: 6px; width: 200px; padding-right: 40px; white-space: nowrap; margin-left: -150px; } td:nth-of-type(1):before { content: "Option"; } td:nth-of-type(2):before { content: "Description"; } td:nth-of-type(3):before { content: "Type"; } td:nth-of-type(4):before { content: "Default";} } 你希望自定義的重要部分是最後4行 - 你需要輸入每個“列”的標題，如果有更多列，則需要添加更多行。如果列較少，則可以將它們移除。...

關聯模型是在資料模型帖子中列出的邏輯資料模型中最受歡迎的，並且它是基於SQL資料庫的基礎。 關聯模型基於兩個簡單的概念： 表格 關聯 關聯模型可以追溯到1969年，當時英國計算機科學家Edgar F. Codd提出了這一概念。作為計算機程序員，我們習慣於關注新奇的事物，但一個能夠在計算機領域中持續50年的技術絕對值得學習。 模型基於表格的事實使其非常直觀易用，因為我們習慣於使用表格來組織事物。比如，想想Excel電子表格。 使用像PostgreSQL、Oracle、MySQL、SQLite和MS SQL Server等基於SQL的資料庫，可以使用關聯模型對使用ER模型分析的數據進行建模，並且幾乎可以立即將其轉換為SQL資料庫格式，這可以被視為關聯模型在現實世界中的實現，但我們將在其他帖子中討論這一點。 在這篇帖子中，我想探討的是關聯模型基於的理論和概念，不是用數學术语表達，而是在實踐中的含義。 如果你是一個學生，你可能會發現我在這裡寫的內容與你的教科書上的內容不一樣，但也許你可以通過閱讀這種更容易理解的方式來掌握在你的學習材料中表達的更正式的概念。 表格 在關聯模型中，表格是一組項目的集合。 它按行和列組織： 名稱 年齡 Flavio 36 Roger 7 Syd 6 元組 表中的每個項目稱為元組。您也可以使用記錄或行這些術語。 元組表示表的一行，如下所示： Flavio 36 屬性 屬性是元組中的一個單一項目。 在這個例子中： Flavio 36 “Flavio”是一個屬性。 36是另一個屬性。 元組是唯一的 表中的每個元組都是唯一的。 在關聯模型中，我們不能有重複的數據，這意味著表中的每一行在至少一個屬性上必須不同。 關聯鍵 確保元組唯一性的是關聯鍵。 關鍵是必須唯一識別元組的一個屬性。 如果關聯鍵是一組屬性，它必須是非冗餘的。這意味著如果我們刪除鍵的其中一個屬性，該鍵將無法確保其唯一性。 如果可以確定多於一個鍵，其中一個鍵將被識別為主鍵。 關鍵完整性約束 表中的任何元組的關鍵屬性不能為null，並且不能重複。 根據一個鍵，我們必須能夠指向一個特定的元組/行，而不會產生歧義。 域限制條件 每個屬性都有關於它可以包含的值的規則。 例如，如果我們決定存儲數字，就不能存儲字符串。我們還可能決定不存儲長於10個字符的字符串作為名稱。 我們也可以稱之為類型。 參考完整性約束 如果一個表包含對一個次要表或同一表中的其他元組的引用，那麼我們必須遵守規則，以防止引用的破壞。 特別是，我們必須避免以下情況破壞引用： 在其他表中，避免刪除或編輯我們指向的記錄的主鍵。 避免插入指向其他表中不存在的鍵的新記錄。 避免改變我們指向的記錄的鍵，而不確保新鍵存在於其他表中。 數據庫管理系統（DBMS）將實施措施來幫助我們實現參考完整性。