HTML Table

luigimariabonini · November 18, 2016, 11:12am

Hi, I am trying to make a table like this:

This is the source code:

<table style="height: 100%; border-color: #B0B0B0; border-collapse: collapse;" border="1" cellpadding="5">
<tbody>
<tr>
<td style="text-align: center;" colspan="6" bgcolor="#ccccff">Abdominal Pain</td>
</tr>
<tr>
<td style="border-bottom: 0px"></td>
<td colspan="4"></td>
<td style="border-bottom: 0px"></td>
</tr>
<tr>
<td style="border-bottom: 0px; border-top: 0px" colspan="3"></td>
<td style="border-bottom: 0px; border-top: 0px" colspan="3"></td>
</tr>
<tr>
<td style="border-top: 0px" colspan="2"></td>
<td rowspan="2" colspan="2"></td>
<td style="border-top: 0px" colspan="2"></td>
</tr>
<tr>
<td style="border-bottom: 0px" colspan="2"></td>
<td style="border-bottom: 0px" colspan="2"></td>
</tr>
<tr>
<td style="border-bottom: 0px" colspan="3"></td>
<td style="border-bottom: 0px" colspan="3"></td>
</tr>
<tr>
<td style="border-top: 0px" colspan="2"></td>
<td colspan="2"></td>
<td style="border-top: 0px" colspan="2"></td>
</tr>
</tbody>

The problem is that I get those lines (with the red cross on) which I would like to eliminate.

TechnoBear · November 18, 2016, 11:26am

Are you sure that what you want is an HTML table? That should be used only for tabular data, and it appears you just want to design the layout. The only place you should use an HTML table to do that is in an HTML e-mail, where other methods are not available.

luigimariabonini · November 18, 2016, 11:29am

What would you suggest? I always found HTML tables convenient to use because they are easy to edit, so I was thinking to do the same thing here. However I am open to other options!

SamA74 · November 18, 2016, 11:33am

I may depend on the content of those boxes. Is it text or images or both?
What are the red Xs for?

luigimariabonini · November 18, 2016, 11:39am

It is basically text. I am trying to replicate this type of diagram:

The red Xs are the lines that I am trying to cancel from the table.

SamA74 · November 18, 2016, 11:57am

It is a tricky one, as it may require a fixed layout which isn’t how I like to do things.
A fixed aspect box with the elements absolutely positioned could work.
Or it could possibly be done with a 3 column layout, looking at the second picture.

luigimariabonini · November 18, 2016, 12:20pm

This, approximately, is what I was trying to do, but the problem is in the border of some cells. (as you can see in the first picture).

PaulOB · November 18, 2016, 1:04pm

If you want to do this fluidly and you can’t wait for grid to arrive then you will need to abuse an html table to do this fluidly.

To get all the alignment correct will require multiple colspan and in some places row span which are not available for css table display properties.

It will mean probably starting with 8 cells across which can then be subdivided with colspan to get the different width cells. Rowspan will be needed for the box in the middle to appear to span two rows.

It should then be possible to just put borders on individual cells as required.

I am away from a computer today but if anyone hasn’t solved it I could look at it tomorrow

It looks like fun

ronpat · November 18, 2016, 1:15pm

With that comment as my shield, I’ll give it a go later today It does look intersting…

Erik_J · November 18, 2016, 4:57pm

I think I’ll try a css table, just for fun.

If I’m quick to post I might finish before @ronpat, he probably has a better solution.

A css attempt to mimic the table in post #1:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Check Flow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
.checkflow{
    display:table;
    border-collapse:collapse;
    margin:auto;
    width:100%;
    height:100%;
    white-space:nowrap;
    text-align:center;
    font:1em sans-serif;
}
h1{
    display:table-caption;
    caption-side:top;
    text-transform:uppercase;
    font:normal 1em sans-serif;

}
.checkflow>div{
    display:inline-table;
    width:1%;
    height:100%;
    text-align:left;
}
.checkflow .pain{
    margin:0 3em;
    width:33%;
    white-space:normal;
}
.checkflow>div div{
    display:table-row;
}
.checkflow span{
    display:table-cell;
    position:relative;
    padding:1em;
    color:green;
}
.organ1,
.organ2,
.organ3{
    border:2px solid black;
}
.organ3{
    border-bottom:0;
    text-align:center;
}
.v-line:before{
    position:absolute;
    top:0;
    left:50%;
    border-left:2px solid black;
    height:100%;
    content:"";
}
.h-line:before,
.h-line:after{
    display:block;
    position:absolute;
    z-index:1;
    top:50%;
    right:100%;
    border-top:2px solid black;
    width:3em;
    content:"\a0";
}
.h-line:after{
    right:auto;
    left:100%;
}
.note{
    font:normal .8em sans-serif;
}
.us-ruq div:nth-child(2n+2) span,
.us-luq div:nth-child(2n+2) span{
    color:black;
}
.us-ruq div:first-child span,
.us-ruq div:last-child span,
.us-luq div:first-child span,
.us-luq div:last-child span{
    color:maroon;
}
</style>
</head><body>

<div class="checkflow"">
    <h1>From the abdominal pain to the organ</h1>
    <div class="us-ruq">
        <div><span>US</span></div>
        <div><span>RUQ</span></div>
        <div><span>Lungs<br>Diaphragm<br>Liver<br>Duodenum<br>Gallbladder</span></div>
        <div><span>RLQ</span></div>
        <div><span>Kidneys/ureters<br>Colon - appendix<br>Gyn / testes</span></div>
        <div><span>CT</span></div>
    </div>
    <div class="pain">
        <div><span class="organ1"">Heart, aorta <i class="note">(MI and dissection can be felt sometimes as epiugastric pain)</i> pancreas, esophagus</span></div>
        <div><span class="v-line"></span></div>
        <div><span class="organ2 h-line">DKA, constipation, diarrhea, early appendicitis</span></div>
        <div><span class="v-line"></span></div>
        <div><span class="organ3 note">Uterus<br>Bladder</span></div>
    </div>
    <div class="us-luq">
        <div><span>US</span></div>
        <div><span>LUQ</span></div>
        <div><span>Lungs<br>Diaphragm<br>Spleen</span></div>
        <div><span>LLQ</span></div>
        <div><span>Kidneys/urethers<br>Colon - diverticula<br>Gyn / testes</span></div>
        <div><span>CT</span></div>
    </div>
</div>

</body></html>

Edit) To lazy to test before posting, added 100% height to the parent table to conform to at least Linux Chromium and Firefox ESR.

ronpat · November 19, 2016, 12:10am

The HTML that you posted only needs two additional style="border-top:0; to remove the only two undesired lines. The other 3 are already gone. The code is very compact, but it seems to me that you must want something more than just erased lines (because you seem to be able to do that quite easily). My only guess is that you want more borderless vertical space in the quadrants around the central cells rather than still being confined to rows of boxes with invisible borders.
And you claim to like HTML table code.

I stuck to HTML table code styled with CSS at the top of the page. There are no inline styles like you had them. Most of the text content is within list items, for better or for worse.

The text will move vertically within 4 quadrants around the central cells rather than being restricted to the ends of 6 rows. The code is fluid down to almost 300px. It could be better with some tweaking.

This is very conventional HTML and CSS tableware. Nothing fancy. Just what you asked for ???

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/html-table/244043
luigimariabonini
-->
    <style type="text/css">
html {
    box-sizing:border-box;
}
*,*:before,*:after {
    box-sizing:inherit;
}
.outer {
    display:table;
    width:90%;
    border:4px solid #8989bb;
    margin:0 auto;
}
table {
    width:100%;
    border-collapse:collapse;
}
td {
    width:20%;
    vertical-align:middle;
    padding:0 2%;
}
.col1,.col6 {width:25%;}
.col2,.col5 {width:5%;}
.col0 {width:0;}

td {height:60px;}
.row2 td,
.row3 td,
.row4 td,
.row5 td {
    height:30px;
}

tr.row0 td {
    height:0;
}

.row1 .col3 {border:2px solid #666;border-top:none;}
.row2 .col2 {border-right:2px solid #666;}
.row1 .col1 {border-bottom:2px dotted #666;}
.row1 .col6 {border-bottom:2px dotted #666;}
.row3 .col2 {border-bottom:2px solid #666;}
.row3 .col3 {border:2px solid #666;}
.row3 .col5 {border-bottom:2px solid #666;}
.row5 .col2 {border-right:2px solid #666;}
.row6 .col3 {border:2px solid #666;border-bottom:none;text-align:center;}

ul {
    list-style:none;
    padding-left:0;
}
caption {
    background-color:#cdcdff;
    font-size:1.25em;
    border-bottom:2px solid #666;
    padding:.25em;
}
.corner li {color:#ce362f;}
.quadrant li {color:#000;}
.organs li {color:#080;}

p {
    margin:.5em 0;
    color:#080;
}
p span {font-size:.875em;}

    </style>
</head>
<body>

<div class="outer">
<table>
    <caption>From the abdominal pain to the organ</caption>
    <tbody>
        <tr class="row0">
            <td class="col0"></td>
            <td class="col1"></td>
            <td class="col2"></td>
            <td class="col3"></td>
            <td class="col4"></td>
            <td class="col5"></td>
            <td class="col6"></td>
        </tr>
        <tr class="row1">
            <td class="col0"></td>
            <td class="col1" rowspan="3">
                <ul class="corner">
                    <li>US</li>
                </ul>
                <ul class="quadrant">
                    <li>RUQ</li>
                </ul>
                <ul class="organs">
                    <li>Lungs</li>
                    <li>Diaphragm</li>
                    <li>Liver</li>
                    <li>Duodenum</li>
                    <li>Gallbladder</li>
                </ul>
            </td>
            <td class="col2"></td>
            <td class="col3" colspan="2">
                <p>Heart, aorta <span>(MI and dissection can be felt sometimes as epigastric pain)</span> pancreas, esophagus</p>
            </td>
            <td class="col5"></td>
            <td class="col6" rowspan="3">
                <ul class="corner">
                    <li>US</li>
                </ul>
                <ul class="quadrant">
                    <li>LUQ</li>
                </ul>
                <ul class="organs">
                    <li>Lungs</li>
                    <li>Diaphragm</li>
                    <li>Spleen</li>
                </ul>
            </td>
        </tr>
        <tr class="row2">
            <td class="col0"></td>
            <td class="col2" colspan="2"></td>
            <td class="col4" colspan="2"></td>
        </tr>
        <tr class="row3">
            <td class="col0"></td>
            <td class="col2"></td>
            <td class="col3" rowspan="2" colspan="2">
                <p>DKA, constipation, diarrhea, early appendicitis</p>
            </td>
            <td class="col5"></td>
        </tr>
        <tr class="row4">
            <td class="col0"></td>
            <td class="col1" rowspan="3">
                <ul class="quadrant">
                    <li>RLQ</li>
                </ul>
                <ul class="organs">
                    <li>Kidneys / Ureters</li>
                    <li>Colon / Appendix</li>
                    <li>Gyn / Testes</li>
                </ul>
                <ul class="corner">
                    <li>CT</li>
                </ul>
            </td>
            <td class="col2"></td>
            <td class="col5"></td>
            <td class="col6" rowspan="3">
                <ul class="quadrant">
                    <li>LLQ</li>
                </ul>
                <ul class="organs">
                    <li>Kidneys / Ureters</li>
                    <li>Colon / Diverticula</li>
                    <li>Gyn / Testes</li>
                </ul>
                <ul class="corner">
                    <li>CT</li>
                </ul>
            </td>
        </tr>
        <tr class="row5">
            <td class="col0"></td>
            <td class="col2" colspan="2"></td>
            <td class="col4" colspan="2"></td>
        </tr>
        <tr class="row6">
            <td class="col0"></td>
            <td class="col2"></td>
            <td class="col3" colspan="2">
                <p>Uterus, Bladder</p>
            </td>
            <td class="col5"></td>
        </tr>
    </tbody>
</table>
</div>

</body>
</html>

I cannot believe that this would be fun to maintain.

ronpat · November 19, 2016, 10:01am

This is a slightly modified version of the above table code. It only uses 4 columns instead of that silly 6 and the text in the right column is set to display right-to-left which has the novel effect of right aligning it and if it overflows its container, it does so toward the center cells, not the right edge of the box. Also used positioned lines instead of the dotted lines to divide the top and bottom halves of the quadrants.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/html-table/244043
luigimariabonini
-->
    <style type="text/css">
html {
    box-sizing:border-box;
}
*,*:before,*:after {
    box-sizing:inherit;
}
.outer {
    display:table;
    width:90%;
    border:4px solid #8989bb;
    margin:0 auto;
}
table {
    width:100%;
    border-collapse:collapse;
}
td {
    width:20%;
    height:30px;  /* arbitrary */
    vertical-align:middle;
    padding:0 2%;
}
.col1,.col4 {width:30%;}
.col2,.col3 {width:20%;}
.col0 {width:0;}

tr.row0 td {
    height:0;
}

.row1 .col2 {border:2px solid #666;border-top:none;}
.row2 .col2 {border-right:2px solid #666;}
.row1 .col1 {position:relative;}
.row1 .col4 {position:relative;}
.row3 .col2 {border:2px solid #666;}
.row5 .col2 {border-right:2px solid #666;}
.row6 .col2 {border:2px solid #666;border-bottom:none;text-align:center;}

.row1 .col1::before,
.row1 .col4::before {
    content:"";
    position:absolute;
    bottom:-1px;
    right:0;
    width:60%;
    height:2px;
    background-color:#666;
}
.row1 .col4::before {
    right:auto;
    left:0;
}
ul {
    list-style:none;
    padding:0;
}
caption {
    background-color:#cdcdff;
    font-size:1.25em;
    border-bottom:2px solid #666;
    padding:.25em;
}
.corner li {color:#ce362f;}
.quadrant li {color:#000;}
.organs li {color:#080;}

p {
    margin:.5em 0;
    color:#080;
}
p span {font-size:.875em;}

    </style>
</head>
<body>

<div class="outer">
<table>
    <caption>From the abdominal pain to the organ</caption>
    <tbody>
        <tr class="row0">
            <td class="col0"></td>
            <td class="col1"></td>
            <td class="col2"></td>
            <td class="col3"></td>
            <td class="col4"></td>
        </tr>
        <tr class="row1">
            <td class="col0"></td>
            <td class="col1" rowspan="3">
                <ul class="corner">
                    <li>US</li>
                </ul>
                <ul class="quadrant">
                    <li>RUQ</li>
                </ul>
                <ul class="organs">
                    <li>Lungs</li>
                    <li>Diaphragm</li>
                    <li>Liver</li>
                    <li>Duodenum</li>
                    <li>Gallbladder</li>
                </ul>
            </td>
            <td class="col2" colspan="2">
                <p>Heart, aorta <span>(MI and dissection can be felt sometimes as epigastric pain)</span> pancreas, esophagus</p>
            </td>
            <td class="col4" rowspan="3" dir="rtl">
                <ul class="corner">
                    <li>US</li>
                </ul>
                <ul class="quadrant">
                    <li>LUQ</li>
                </ul>
                <ul class="organs">
                    <li>Lungs</li>
                    <li>Diaphragm</li>
                    <li>Spleen</li>
                </ul>
            </td>
        </tr>
        <tr class="row2">
            <td class="col0"></td>
            <td class="col2"></td>
            <td class="col3"></td>
        </tr>
        <tr class="row3">
            <td class="col0"></td>
            <td class="col2" rowspan="2" colspan="2">
                <p>DKA, constipation, diarrhea, early appendicitis</p>
            </td>
        </tr>
        <tr class="row4">
            <td class="col0"></td>
            <td class="col1" rowspan="3">
                <ul class="quadrant">
                    <li>RLQ</li>
                </ul>
                <ul class="organs">
                    <li>Kidneys / Ureters</li>
                    <li>Colon / Appendix</li>
                    <li>Gyn / Testes</li>
                </ul>
                <ul class="corner">
                    <li>CT</li>
                </ul>
            </td>
            <td class="col4" rowspan="3" dir="rtl">
                <ul class="quadrant">
                    <li>LLQ</li>
                </ul>
                <ul class="organs">
                    <li>Kidneys / Ureters</li>
                    <li>Colon / Diverticula</li>
                    <li>Gyn / Testes</li>
                </ul>
                <ul class="corner">
                    <li>CT</li>
                </ul>
            </td>
        </tr>
        <tr class="row5">
            <td class="col0"></td>
            <td class="col2"></td>
            <td class="col3"></td>
        </tr>
        <tr class="row6">
            <td class="col0"></td>
            <td class="col2" colspan="2">
                <p>Uterus, Bladder</p>
            </td>
        </tr>
    </tbody>
</table>
</div>

</body>
</html>

PaulOB · November 19, 2016, 10:24am

Good work Ron and Erik. My work here is done

Erik_J · November 19, 2016, 12:37pm

I’m sure you’ll keep supervising.

Next poster maybe has a flexbox solution?

Gandalf · November 19, 2016, 1:05pm

<off-topic>
Are you confusing this with the true or false thread @Erik_J ?
</off-topic>

Erik_J · November 19, 2016, 1:29pm

Off Topic:

False, but truthfully it did cross my mind, yes.

Hmm…

luigimariabonini · November 19, 2016, 1:33pm

Thank you for your great help guys!! However I have some issues when I display those table in an online editor like http://htmledit.squarefree.com/. The tables appear different from what you posted.
Moreover, as @ronpat said, they won’t be easy to maintain, that’s why I was thinking to adapt that diagram in a simpler format, something like the original code I posted. My only issue were those lines (marked with the red Xs), which I was trying to eliminate. However, it looks like the command style="border-top: 0px" isn’t recognized in all cells…

SamA74 · November 19, 2016, 1:38pm

I did make a start on one yesterday, but did not see it through.

TechnoBear · November 19, 2016, 1:42pm

Is there a particular reason why you need to use that editor?

SamA74 · November 19, 2016, 2:03pm

What you should be concerned about is how it looks in the major browsers.