Splitting ONE cell into 2 rows

semicolon · September 20, 2018, 5:54pm

CELL%20SPLIT

Hi all. Above is a graphic of what I’m trying to accomplish in STRICT, and underneath, my crude efforts. The blue and the yellow are intended to be either background colors or some other little container(s) to which I can type text.

Thousands have answered this question but nothing works and I’ve wasted a day at this. Tidy online added a couple of styles so I’m keeping them in, even if I’m not using them. It surprises me that I can’t apparently carve out a couple of little containers without having to drop an entire table into the cell. Yes, I have gotten it to work that way, but I’m looking for alternate solutions. This might be The One to get me to dip my toe into . . .

HTML 5

Help me out guys? I’m clearly over my head.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>&#9679; Strict + UTF-8</title>

<style type="TEXT/CSS">

     body {
     font-size: 14px;
     line-height: 15px;
     font-family: ARIAL, SANS-SERIF;
     margin-left: 20px;
     margin-right: 20px;
     margin-top: 20px;
     margin-bottom: 20px;
     }

     P {
     line-height: -1 em;}

     TABLE, TH, TD {
     border-collapse: collapse;
     border: 2px solid #91CAFF;

     span.c3 {WIDTH: 200%; COLOR: #1890FF}
     span.c2 {WIDTH: 200%; COLOR: yellow}

     a.c1 {TEXT-DECORATION: underline; COLOR: #1E90FF}

</style>
</head>

<body>
     <table style=" text-align: left; width: 100%; height: 100%;" border="1" cellpadding=
     "2" cellspacing="2">
          <tbody>
               <tr>
                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>
               </tr>

               <tr>
                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>
               </tr>

               <tr>
                    <td colspan="1" rowspan="2" style="vertical-align: top;">&nbsp;</td>

                    <td colspan="1" rowspan="2" style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td colspan="1" rowspan="2" style="vertical-align: top;">&nbsp;</td>

                    <td colspan="1" rowspan="2" style="vertical-align: top;">&nbsp;</td>
               </tr>

               <tr>
                    <td colspan="2" rowspan="1" style="vertical-align: top;">&nbsp;</td>
               </tr>

               <tr>
                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>
               </tr>

               <tr>
                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>

                    <td style="vertical-align: top;">&nbsp;</td>
               </tr>
          </tbody>
     </table>
</body>
</html>

coothead · September 20, 2018, 6:13pm

Hi there semicolon,

two questions…

Why are you using the HTML4 strict dtd ?
Why are you using the table element ?

coothead

semicolon · September 20, 2018, 6:20pm

This is your opportunity to submit solutions. Submit.

ronpat · September 20, 2018, 6:23pm

Well, if it isn’t our favorite curmudgeon.

Actually YOU have posted a workable solution - but you are saying that “nothing [out of thousands of submissions] works”

Can you specifically describe at least one “thing” that “doesn’t work”?

semicolon · September 20, 2018, 6:33pm

Ronpat I presume you’re referring to placing a table into the cell? I see I’ve overstayed my welcome and need to find alternatives elsewhere.

coothead · September 20, 2018, 6:35pm

Hi there semicolon,

I am all in favour of coding to HTML4 standards and then
making the sensible code modifications for HTML5, such
as…

<meta charset="utf-8">

…and

<style media="screen">

…for example.

The use of the table element is a different matter though.

Can you justify it’s use for your problem?

coothead

ronpat · September 20, 2018, 6:40pm

Not really. I wasn’t making any judgements. Just wondering what you wanted and what had been ruled out. Putting a child table in a cell would work easily, but not if you don’t want to do that.

The example that you posted is more complex but “seems” to do what you wish without adding a child table, so I am looking for a better explanation of where your imagination is going. “What might work for you”? and what doesn’t.

You’ve only ruled out “child table” and I assume that you don’t care for your current example.

Mittineague · September 20, 2018, 7:05pm

I actually like the “tightness” of HTML4 strict more than I do the “looseness” of HTML5. And I have no problem with using table markup for tabular data. Though I usually find it easier to generate complex table code server-side.

Short of scrapping the table approach altogether, I can see two approaches.

colspan column 3 and 4 and nest a table in the table cell.
change the second row into 3 rows (or 4 or whatever) and rowspan columns 1,2, 5,6 in those rows.

If it were me, I’d nest the table because it would be less messy.

PaulOB · September 21, 2018, 12:57pm

Yes I’m confused also as the current example with rowspan and colspan is the way I would have coded this (assuming tabular data). Why would another method be required?

Dropping in a nested table is unnecessary and you will lose the relationship between the columns in the nested table (assuming the nested table does have columns or needs to match parent table columns apart from the cell its located in).

Mittineague · September 21, 2018, 8:46pm

Ah, yes. I still have far to go in getting my thinking to start with semantics first.

ronpat · September 22, 2018, 7:30am

<ot>
“There is a principle which is a bar against all information, which is proof against all arguments and which cannot fail to keep a man in everlasting ignorance… that principle is contempt prior to investigation.” – Herbert Spencer
</ot>

system · December 22, 2018, 7:54pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.