Create HTML Table

Question

I had created a sample HTML for Table where I have 3 columns and 2 rows.

    <!DOCTYPE html>
<html>
<body>
    <table border='1' width='400px' cellspacing="0" cellpadding="2" height='100%' style='color: black;'>
        <tr style='color: #fff; background: black;'>
            <th>column1</th>
            <th>column2</th>
            <th>column3</th>
        </tr>
        <tr>
            <td></td><td> </td><td> 1234</td>
        </tr>
        <tr>
            <td> 190</td><td> 2</td><td>454545</td>
        </tr>
    </table>
</body>
</html>

The table created successfully but the separator is missing between the columns where the data is not available. This issue occured only in IE, in Mozilla it works fine. Can anyone help me to find out a solution for this? Printscreen

iam getting this values from the database so that i cannot modify the content but only the structure. — Tom Cruise
– Tom Cruise, Commented Nov 22, 2013 at 6:44
Which version of IE ? it works perfectly in chrome/safari/firefox — Jayanth Ramachandran
– Jayanth Ramachandran, Commented Nov 22, 2013 at 6:45
using empty($row['column1']) to check the value is empty or not. You can implementation by this <td><?=( empty($row['column1']) ) ? ' ' : $row['column1'] ?></td> — Allen Chak
– Allen Chak, Commented Nov 22, 2013 at 6:48
I dont want to change the content. my question is What changes in the table structure will give right OP? — Tom Cruise
– Tom Cruise, Commented Nov 22, 2013 at 6:53

Linga · Accepted Answer · 2013-11-22 07:11:40Z

1

You can fix this by defining exact border style for both table as well as td tags, by doing this you prevent browser from applying its own styling. Remove border='1' and define

table {
border: 1px solid #3C2610;
}

td {
border: 1px solid #3C2610;
}

The cell dosn't exist in some IE's unless it's filled with something. If you can put a   (non breaking space) to fill the void, that will usually work.

Apparently, IE8 shows the cells by default, and you have to hide it with empty-cells:hide But it doesn't work at all in IE7 (which hides by default)

Another solution is adding these two attributes to the table element: frame="box" and rules="all" like this:

<table border="1" cellspacing="0" frame="box" rules="all">

edited Nov 22, 2013 at 7:11

answered Nov 22, 2013 at 7:01

Linga

10.6k10 gold badges57 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

russellc · Accepted Answer · 2013-11-22 06:44:07Z

0

Would putting a non breaking space ( ) into the empty column work?

answered Nov 22, 2013 at 6:44

russellc

4943 silver badges7 bronze badges

Comments

Krish R · Accepted Answer · 2013-11-22 06:52:56Z

0

Try adding   in between td tag, such as <tr><td> </td><td> </td><td> 1234</td></tr> in HTML

edited Nov 22, 2013 at 6:52

answered Nov 22, 2013 at 6:47

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

3 Comments

Krish R Over a year ago

In first line, I have provided for HTML

Krish R Over a year ago

Just provide an idea for in dynamic language. But now I have removed taht from my answer. Thanks @ ling.s

Tom Cruise Over a year ago

@ChinnuR I know if im changing the content it will give the OP. But since my result set may huge and validating will effect the performance i need to find out a way to fix this in HTML.When mozilla,chrome gives the right OP why only IE shows such a ugly structure?

Collectives™ on Stack Overflow

Create HTML Table

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related