Sir I have these codes

<html>
</head>
<style type="text/css">
      #box1{
      width:300px;
      border:1px solid green;
      overflow:hidden;
      margin:0 auto;
      padding:10px;
      }
      th {
      background:#6495ED;
      padding-bottom:5px;
      color:white;
      }
      td {
      border-collapse: collapse;
      text-align:center;
      }
      .format{
      padding:5px;
      background:white;
      border:1px solid #90bade;
      }
      .namebold 
      {
      color:brown;
      font-size:12pt;
      font-weight:bold;
      text-align:center;
      font-family: Georgia, "Times New Roman", Times, serif;
      img {
      width:70px;
      height:50px;
      border=1px solid gray;
      }
   </style>undefined</head>undefined<body>
<div id="box1" >
    <table width=100% >
        <caption>
            <h4 style=color:blue;>The World</h4>
        </caption>
        <tr>
            <th>Asia</th>
            <th>Africa</th>
            <th>Europe</th>
        </tr>
        <tr>
            <td class="format">
                <img  src="http://www.flags.net/images/smallflags/PAKS0001.GIF">
                </td>
                <td class="format">
                    <img src="http://www.flags.net/images/smallflags/UNKG0001.GIF">
                    </td>
                    <td class="format">
                        <img src="http://www.flags.net/images/smallflags/EGYP0001.GIF">
                        </td>
                    </tr>
                    <tr></tr>
                    <tr>
                        <td class="namebold">Pakistan</td>
                        <td class="namebold">Egype</td>
                        <td class="namebold" >UK</td>
                    </tr>
                    <tr>
                        <td>Islamabad</td>
                        <td>Cairo</td>
                        <td>London</td>
                    </tr>
                </table>
            </div>
        </body>
    </html>

These code work fine, no issue but...
but I want to ask, is it possible to display same result without using Table tag?
I mean while using div.

If possible then please help

Recommended Answers

You can use CSS and divs/spans or <ul>/<li> to get a similar effect if the structure isn't too complex but if you intend to display tabular data then a <table> is the best way to go. That is what it is designed for.

Jump to Post

Yep I agree tables are supposed to be used for tabular data but not for page layout/templates etc.

Jump to Post

All 5 Replies

You can use CSS and divs/spans or <ul>/<li> to get a similar effect if the structure isn't too complex but if you intend to display tabular data then a <table> is the best way to go. That is what it is designed for.

Yep I agree tables are supposed to be used for tabular data but not for page layout/templates etc.

Tables are the best way to arrange data in a pretty layout and in exact form. Every website use forms to arrange data.

Member Avatar

@ALIS

What on earth are you suggesting? Placing forms in tables? I hope not. Unless you have controls in tabular data output Such as update fields and buttons. Otherwise do not use tables. Tables should be the way to go for the data in the OP. Unless that is you want to make some sort of panel box for each record. These can be effective especially for gallery type entries.

How about <fieldset></fieldset>?

Be a part of the DaniWeb community

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