缤纷多彩的植物信息世界

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::
读取数据库数据到HTML Table 并加入一些漂亮的CSS

效果图

2009-05-28_00079

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        /* roScripts Table Design by Mihalcea Romeo www.roscripts.com
----------------------------------------------- */
        table
        {
            border-collapse: collapse;
            background: #EFF4FB url(http://www.roscripts.com/images/teaser.gif) repeat-x;
            border-left: 1px solid #686868;
            border-right: 1px solid #686868;
            font: 0.8em/145% 'Trebuchet MS' ,helvetica,arial,verdana;
            color: #333;
        }
        td, th
        {
            padding: 5px;
        }
        caption
        {
            padding: 0 0 .5em 0;
            text-align: left;
            font-size: 1.4em;
            font-weight: bold;
            text-transform: uppercase;
            color: #333;
            background: transparent;
        }
        /* =links
----------------------------------------------- */
        table a
        {
            color: #950000;
            text-decoration: none;
        }
        table a:link
        {
        }
        table a:visited
        {
            font-weight: normal;
            color: #666;
            text-decoration: line-through;
        }
        table a:hover
        {
            border-bottom: 1px dashed #bbb;
        }
        /* =head =foot
----------------------------------------------- */
        thead th, tfoot th, tfoot td
        {
            background: #333 url(http://www.roscripts.com/images/llsh.gif) repeat-x;
            color: #fff;
        }
        tfoot td
        {
            text-align: right;
        }
        /* =body
----------------------------------------------- */
        tbody th, tbody td
        {
            border-bottom: dotted 1px #333;
        }
        tbody th
        {
            white-space: nowrap;
        }
        tbody th a
        {
            color: #333;
        }
        .odd
        {
        }
        tbody tr:hover
        {
            background: #fafafa;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="display" runat="server">
            中国高等植物名录</div>
    </div>
    </form>
</body>
</html>

Default.aspx.cs

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.Configuration;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // Connection set up
        String strConnection = WebConfigurationManager.ConnectionStrings["CNPCEditConnectionString"].ConnectionString;

        SqlConnection objConnection = new SqlConnection(strConnection);
        String strSQL = "SELECT FamilyName, FamilyNameCh,FamilyID from Family";
        // DataAdapter setup
        SqlDataAdapter objAdapter = new SqlDataAdapter(strSQL, objConnection);
        // DataSet & Adapter & Table
        DataSet objDataSet = new DataSet();
        objAdapter.Fill(objDataSet, "Family");
        String strResultsHolder;
        strResultsHolder = "<table>";
        strResultsHolder += "<tr>";
        //Change the column header name
        objDataSet.Tables["Family"].Columns[0].ColumnName = "科学名";
        objDataSet.Tables["Family"].Columns[1].ColumnName = "科中文名";
        objDataSet.Tables["Family"].Columns[2].ColumnName = "科编号";
        foreach (DataColumn c in objDataSet.Tables["Family"].Columns)
        {
            strResultsHolder += "<td>" + c.ColumnName + "</td>";
        }
        strResultsHolder += "</tr>";
        foreach (DataRow r in objDataSet.Tables["Family"].Rows)
        {
            strResultsHolder += "<tr><td width=5%>" + r["科学名"] + "<td width=5%>" + r["科中文名"] + "<td width=5%>" + r["科编号"] + "</td></td></tr></td>";
        }
        strResultsHolder += "</table>";
        display.InnerHtml = strResultsHolder;

    }
}
这里是一些Talbe CSS的资源: http://icant.co.uk/csstablegallery/
posted on 2009-05-28 13:49  虎克  阅读(1568)  评论(0)    收藏  举报