可以用表格做, 然后用JS判断,
判断每一行的第一个td 第二td 第三td 第四td的颜色
<script type="text/javascript" src="jquery-1.8.0.min.js"></script><script type="text/javascript">
$(function(){
$('.table tr').each(function(){
$(this).children('td').each(function(i){
if(i == 1){
$(this).css('color','#F54354')
}
if(i == 2){
$(this).css('color','#FF6699')
}
if(i == 3){
$(this).css('color','#9933FF')
}
if(i == 4){
$(this).css('color','#0044FF')
}
})
})
})
</script>
<body>
<table class="table">
<tr><td>第一</td><td>第二</td><td>第三</td><td>第四</td></tr>
<tr><td>第一</td><td>第二</td><td>第三</td><td>第四</td></tr>
<tr><td>第一</td><td>第二</td><td>第三</td><td>第四</td></tr>
<tr><td>第一</td><td>第二</td><td>第三</td><td>第四</td></tr>
</table>
帮你做了个demo
给四列的父标签设置display:box这个是css3的属性，目前支持不是很好，所以需要用到浏览器独有的标识，如:display:-webkit-box；需要哪些浏览器支持可以百度下。然后需要给这四列设置box-flex:1这个跟前面的属性一样，需要添加浏览器独有的标志。也可以给一列设置一个固定值，另外的设置box-flex:1也可以平均分布。如果不懂可以查看css3属性，或者继续提问代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>用html+CSS做表格</title>
<style type="text/css">
ul{padding:0
width:324px/*设置表格宽 */
height:42px/*设置表格高*/
margin:30px
border-top:#000 1px solid/*设置表格上边框*/
border-right:#000 1px solid/*设置表格右边框*/
}
li{ border-left:#000 1px solid/*设置表格左边框*/
border-bottom:#000 1px solid/*设置表格下边框*/
/*设置单元格边框*/
list-style:none/*清除项目列表前的标记*/
float:left/*设置单元格浮动，用于水平排列*/
display:block/*设置单元格为块级元素于用语控制大小等*/
width:80px/*设置单元格宽*/
height:20px/*设置单元格高*/
text-align:center/*设置单元格内文本对齐方式*/
}
</style>
</head>
<body>
<!-- 原理就是利用项目列表的每个项目做出表格中的每个单元格，然后通过设置ul和li的边框达到设置表格的边框效果 -->
<ul>
<li>表格1</li>
<li>表格2</li>
<li>表格3</li>
<li>表格4</li>
<li>表格A</li>
<li>表格B</li>
<li>表格C</li>
<li>表格D</li>
</ul>
</body>
</html>
----希望对你有帮助 ----
-------满意采纳奥-----
