使用SQL结果的“Nice”html表

时间:2013-09-30 10:42:54

标签: php html sql html-table

我目前有这个html表使用SQL结果来填充它:

<table> 
<table border="1">
    <tr> 

        <th>Username</th> 
        <th>holid</th> 
        <th>Start date</th> 
        <th>end date</th> 
        <th>Work days off</th> 


    </tr> 
    <?php foreach($rows as $row): ?> 
    <table border="1">
        <tr> 
            <td><?php echo htmlentities($row['username'], ENT_QUOTES, 'UTF-8');?></td> 
            <td><?php echo htmlentities($row['starthol'], ENT_QUOTES, 'UTF-8'); ?></td> 
            <td><?php echo htmlentities($row['endhol'], ENT_QUOTES, 'UTF-8'); ?></td> 
            <td><?php echo htmlentities($row['days'], ENT_QUOTES, 'UTF-8'); ?></td> 
            <td><a href="#">Approve</a></td> 
            <td><a href="#">Reject</a></td> 

        </tr> 
    <?php endforeach; ?> 
</table> 

这样可以正常工作,但表格非常杂乱且标题不合适。是否有一种简单的方法可以使这个更干净(php初学者)。

2 个答案:

答案 0 :(得分:1)

删除第二个<table border="1">,即foreach指令下面的那个。

编辑:也是最早的一个。每个<table>代码都应该有一个对应的</table>(适用于HTML中的所有代码!)

另外,请尝试将<th><td>匹配。现在有5 <th>个,每行有6 <td> s。

答案 1 :(得分:1)

以下是删除编码的额外表格标签,请参阅下面的css编码。

<table border="1">
<tr> 

    <th>Username</th> 
    <th>holid</th> 
    <th>Start date</th> 
    <th>end date</th> 
    <th>Work days off</th> 


</tr> 
<?php foreach($rows as $row): ?> 

    <tr> 
        <td><?php echo htmlentities($row['username'], ENT_QUOTES, 'UTF-8');?></td> 
        <td><?php echo htmlentities($row['starthol'], ENT_QUOTES, 'UTF-8'); ?></td> 
        <td><?php echo htmlentities($row['endhol'], ENT_QUOTES, 'UTF-8'); ?></td> 
        <td><?php echo htmlentities($row['days'], ENT_QUOTES, 'UTF-8'); ?></td> 
        <td><a href="#">Approve</a></td> 
        <td><a href="#">Reject</a></td> 

    </tr> 
<?php endforeach; ?> 
</table> 


/*css styles*/

table { 

    border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
    background: #eee; 
}
th { 
    background: #333; 
    color: white; 
    font-weight: bold; 
}
td, th { 
    padding: 6px; 
    border: 1px solid #ccc; 
    text-align: left; 
}