在網站開發中，數據圖表是非常重要的一個元素。它不僅可以直觀地呈現數據，還可以讓用戶更加快速、清晰地了解數據的變化和趨勢。而通過CSS實現數據圖表，則是一種簡單而優雅的實現方式。

/*定義數據表容器*/
.chart {
width: 100%;
height: 500px;
position: relative;
overflow: hidden;
}
/*定義數據表柱狀圖*/
.bar {
width: 60px;
height: 300px;
margin-right: 20px;
position: absolute;
bottom: 0;
left: 0;
background-color: #3498db;
transition: all 0.5s ease-in-out;
}
/*為每個數據條目添加不同的顏色*/
.bar:nth-child(1) { background-color: #e74c3c; }
.bar:nth-child(2) { background-color: #1abc9c; }
.bar:nth-child(3) { background-color: #9b59b6; }
.bar:nth-child(4) { background-color: #f1c40f; }
.bar:nth-child(5) { background-color: #95a5a6; }
/*為每個數據條目設置不同的高度*/
.bar:nth-child(1) { height: 200px; }
.bar:nth-child(2) { height: 250px; }
.bar:nth-child(3) { height: 100px; }
.bar:nth-child(4) { height: 350px; }
.bar:nth-child(5) { height: 150px; }
/*設置鼠標懸浮時的效果，加深背景顏色*/
.bar:hover {
background-color: #2c3e50;
cursor: pointer;
}
/*為每個數據項添加文字描述*/
.label {
position: absolute;
bottom: -30px;
width: 60px;
text-align: center;
font-size: 14px;
color: #fff;
}
/*為每個數據項設置不同的描述*/
.label:nth-child(1) { left: 0; content: "A"; }
.label:nth-child(2) { left: 80px; content: "B"; }
.label:nth-child(3) { left: 160px; content: "C"; }
.label:nth-child(4) { left: 240px; content: "D"; }
.label:nth-child(5) { left: 320px; content: "E"; }

上述代碼通過CSS實現了一張柱狀圖數據表。它將每個數據條目表示成一個長方形，每個長方形的高度和顏色都代表了不同的數據項。通過添加不同的樣式，我們可以實現更多更為豐富的數據表。這種實現方式基于純CSS，不需要使用JavaScript或其他編程語言，而且它可以很方便地嵌入到網頁中，方便用戶在頁面上直接看到數據變化的趨勢。