Member Avatar for davy_yg

Hello,

I would like to table like the first table that they show in the first one:

1) The look of an HTML table can be greatly improved with CSS.
http://www.w3schools.com/css/css_table.asp

How to create table like that? They show me different tables in their next examples. The first one doesn't show me the script.

Let me know how to do so. I can change the coloring later on.

  • 3 Contributors
  • 4 Replies
  • 105 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by davy_yg

Recommended Answers

All 4 Replies

Member Avatar for JameB

Okay so first off you need a table - use the <table></table> tags to create one...

CODE:

<tablet>
</table>

Now you want 13 rows - use the <tr></tr> tags! (I'm only going to make a table with 3 rows, you do the rest)

CODE:

<table>
    <tr>
    </tr>

    <tr>
    </tr>

    <tr>
    </tr>
</table>

Now you want three columns, in other words, three table divisions PER row - use the <td></td> tags!

CODE:

    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

Now, that you have a basic table, use CSS 3.0 to style the table:

  • To create a colored background, create a class called 'green_background' and give it style background-color: lightgreen;. Now in every other <tr></tr> tags, set the class to green_background
  • To create green borders, give the <table></table> and <td></td> tags green border: border: 1pt solid darkgreen;
  • You can do the font styling and anything else yourself.
Edited by JameB
Member Avatar for JorgeM

If you look at the source of page via your browser, you can take a look at the detais of the structure of the HTML table and Styling.

here is an example of whats on that page your referenced (including 5 rows so you can see the alternating row color).. i changed the content, but you will get the point. If you do not want the table to take up 100% of the width of the page, change that value in the Style section. So you want to center it, modify the width and add a margin to the #cust selector: {width:60%;margin:0px auto;}

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
<style type="text/css">
#cust {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;}

#cust td, #customers th {
font-size:1.2em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;}

#cust th {
font-size:1.4em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#fff;}

#cust tr.alt td {
color:#000;
background-color:#EAF2D3;}
</style>

</head>
<body>
<table id="cust">
<tr>
  <th>Company</th>
  <th>Contact</th>
  <th>Country</th>
</tr>
<tr>
  <td>Company-1</td>
  <td>Contact-1</td>
  <td>Country-1</td>
</tr>
<tr class="alt">
  <td>Company-2</td>
  <td>Contact-2</td>
  <td>Country-2</td>
</tr>
<tr>
  <td>Company-3</td>
  <td>Contact-3</td>
  <td>Country-3</td>
</tr>
<tr class="alt">
  <td>Company-4</td>
  <td>Contact-4</td>
  <td>Country-4</td>
</tr>
<tr>
  <td>Company-5</td>
  <td>Contact-5</td>
  <td>Country-5</td>
</tr>
</table>

</body>
</html>
Member Avatar for davy_yg

Thanks.

How to color table like this alternatively:

<?php

while ($data = mysql_fetch_array($result)){
        echo '<tr>';
            echo '<td>'.$data['page'].'</td>';
            echo '<td>'.$data['judul'].'</td>';
            echo '<td><a href="admin.php?mode=delete&id='.$data['id'].'">Hapus</a> |<a href="input_berita_static.php?id='.$data['id'].'">Edit</a></td>';
        echo '</tr>';
        }
?>
Member Avatar for davy_yg

come up with another idea and it still not working yet:

<?php
            $i=0;
            while ($data = mysql_fetch_array($result)){
            $result2=$i%2?'#000':'#EAF2D3';

                    echo "<tr color='$result2'>";                    
                    echo '<td>'.$data['page'].'</td>';
                    echo '<td>'.$data['judul'].'</td>';
                    echo '<td><a href="admin.php?mode=delete&id='.$data['id'].'">Hapus</a> |<a href="input_berita_static.php?id='.$data['id'].'">Edit</a></td>';
            echo '</tr>';

            $i++;   
            }
?>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.