Splitting ONE cell into 2 rows


#1

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. :roll_eyes: 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>

#2

Hi there semicolon,

two questions…

  1. Why are you using the HTML4 strict dtd ?
  2. Why are you using the table element ?

coothead


#3

This is your opportunity to submit solutions. Submit.


#4

Well, if it isn’t our favorite curmudgeon. :nono:

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”?


#5

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.


#6

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


#7

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.


#8

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.


#9

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).


#10

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


#11

<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>