Cara membuat table HTML dengan menggunakan ROWSPAN dan COLSPAN


Di bawah ini merupakan langkah-langkah membuat tabel HTML dengan menggunakn ROWSPAN dan COLSPAN, dengan menggunakan MACROMEDIA DREAMWEAVER.
Saya membuat tabel ini menggunakan DREAMWEAVER 8.
Inilah SCRIPT-SCRIPT-nya....!!!!


</head>

<table align="center" width="550" border="2" height="350">
    <tr>
            <td bgcolor="#FCFF00" rowspan="2" ><center>rowspan 1</center></td>
            <td bgcolor="#FF0000"<center>1 . 2</center></td>
            <td bgcolor="#FF0000"<center>1 . 3</center></td>
            <td bgcolor="#FF0000"<center>1 . 4</center></td>
            <td bgcolor="#FCFF00" colspan="2" rowspan="2"><center>rowspan 2</center></td>
            <td bgcolor="#FF0000"<center>1 . 7</center></td>
          
    </tr>
     <tr>
            <td bgcolor="#FCFF00" rowspan="2" ><center>rowspan 3</center></td>
            <td bgcolor="#FF0000"<center>2 . 3</center></td>
            <td bgcolor="#FF0000"<center>2 . 4</center></td>
            <td bgcolor="#FF0000"<center>2 . 7</center></td>
          
          
    </tr>  
    <tr>
            <td bgcolor="#FF0000"<center>3 . 1</center></td>
            <td bgcolor="#FCFF00" colspan="2"><center>colspan 1</center></td>
            <td bgcolor="#FF0000"<center>3 . 5</center></td>
            <td bgcolor="#FF0000"<center>3 . 6</center></td>
            <td bgcolor="#FF0000"<center>3 . 7</center></td>
          
          
    </tr>
    <tr>
            <td bgcolor="#FF0000"<center>4 . 1</center></td>
            <td bgcolor="#FF0000"<center>4 . 2</center></td>
            <td bgcolor="#FF0000"<center>4 . 3</center></td>
            <td bgcolor="#FF0000"<center>4 . 4</center></td>
            <td bgcolor="#FF0000"<center>4 . 5</center></td>
            <td bgcolor="#FCFF00" colspan="2"><center>colspan 2</center></td>
          
          
    </tr>
    <tr>
            <td bgcolor="#FCFF00" colspan="3"><center>colspan 3</center></td>
            <td bgcolor="#FF0000"<center>5 . 4</center></td>
            <td bgcolor="#FF0000"<center>5 . 5</center></td>
            <td bgcolor="#FCFF00" rowspan="2"><center>rowspan 4</center></td>
            <td bgcolor="#FF0000"<center>5 . 7</center></td>
          
              
    </tr>
     <tr>
            <td bgcolor="#FF0000"<center>6 . 1</center></td>
            <td bgcolor="#FCFF00" colspan="2">colspan 4</td>
            <td bgcolor="#FF0000"<center>6 . 4</center></td>
            <td bgcolor="#FF0000"<center>6 . 5</center></td>
            <td bgcolor="#FF0000"<center>6 . 7</center></td>
     
    </tr>
  
</table>



<body>
</body>
</html>

NAH INI HASIL ...
Membuatnya agak sulit sihh, tapi kalau diperhatikan pasti akan mudah mengerjakannya..



rowspan 1

1 . 2

1 . 3

1 . 4

rowspan 2

1 . 7

rowspan 3

2 . 3

2 . 4

2 . 7

3 . 1

colspan 1

3 . 5

3 . 6

3 . 7

4 . 1

4 . 2

4 . 3

4 . 4

4 . 5

colspan 2

colspan 3

5 . 4

5 . 5

rowspan 4

5 . 7

6 . 1
colspan 4
6 . 4

6 . 5

6 . 7


SELAMAT MENCOBANYA....!!!!



Share it to your friends..!

Share to Facebook Share this post on twitter Bookmark Delicious Digg This Stumbleupon Reddit Yahoo Bookmark Furl-Diigo Google Bookmark Technorati Newsvine Tips Triks Blogger, Tutorial SEO, Info

1 komentar:

  1. tugasnya sudah saya periksa...

Post a Comment

 
Ridho Technology © 2012 | Template by Ridho Technology