0

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
5
Views
5 Years
Discussion Span
Last Post by davy_yg
0

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

0

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>
0

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>';
        }
?>
0

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++;   
            }
?>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.