Simple table issue foiled by my ignorance

Hi there everyone!

I’ve got a page that should have the form elements in a vertical row in a left td and an image centered horizontally in the right td. This is embarrassing, but I’ve spent two hours trying to get the right td to span the remainder of the page’s width and center the image inside. The image remains forced left against the form side regardless of what I try.

I’ve no doubt it’s a simple issue resulting from my ignorance at what I’m trying to do but could someone point me towards what I’m screwing up?

https://wheeltastic.com/popup.php

Page is validated and I don’t see any glaring issue.

thanks for your time!

I’m not at all sure why you’re trying to do this with nested tables (), but your outer table has <table style="width:75%;">, which is restricting the overall size.

(With HTML tables for layout and inline styles, I can only assume you’re on a nostalgia trip for the good old days of 1999. )

5 Likes

Hi there, Mr. Bear and thanks very much for your help!

I was told in this forum and others that tables were appropriate when presenting tabulated data and since the page was going to have multiple rows on both sides with form information, I thought it fit the bill. Is this not the case?

And thank you for the heads up on the percentage scrunching. I forgot that utilizing my bootstrap stuff was taking away from the entire page width. I’ll try to stretch it out a bit.

Thanks!

1 Like

HTML tables are appropriate for tabular data; that is, items which are related to each other, such as sports tournament results or a weather forecast. Examples:

http://www.worldrugby.org/sevens-series/standings

If you just want things laid out in a kind of table format, then use CSS display:table or other CSS methods.

2 Likes

That’s not tabular data that’s separate information. If the data is related explicitly between row and column (like a spreadsheet) then that’s tabular data. What you are doing is using tables for layout which is incorrect.

You could easily have used the display table and table-cell properties to do this without using table tags (or indeed just use the bootstrap grid).

There may be a case to be made for the form rows to be classed as tabular but generally it is accepted that is not the case. If you need a table type layout then use the display table/table-cell properties instead (unless you need colspan or rowspan as they are not present in the css version). However you could have done that page using the framework you already chose :slight_smile:

1 Like

I’ve begun working on removing the tables but I have a question on how to handle a certain aspect of my design:

In the alternating colored rows, how would I create a setup that would allow all the bolded titles to align right (in the demo page, where the colons all line up before the form element begins).

Should I use two side by side containers with the title and form elements contained separately? I understand that I could manually set the width of the title containers but I would like all of the titles to automatically adjust to align with any title I may place into it…

https://wheeltastic.com/popup.php

This is very rough (as I am in a rush again) but I’d start with something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.wrap {
	display:table;
	width:100%;
	max-width:960px;
	margin:auto;
}
.trow {
	display:table-row;
}
.tcell {
	display:table-cell;
	vertical-align:middle;
	padding:1em 10px;
}
.trow:nth-of-type(odd) .tcell {
	background:red;
}
.tcell {
	width:33%;
}
.tcell1 {
	white-space:nowrap;
	width:1%;
	text-align:right;
}
.tcell1 b {
	padding-top:1em;
	display:block;
}
.tcell label {
	display:block;
}
.tcell input {
	width:100%;
	height:2em;
	line-height:2em
}
.single-row .tcell {
	height:1.5em;
	line-height:1.5em
}
.single-row .tcell1 b {
	padding-top:0
}
.single-row .tcell2 {
	position:relative;
}
.single-row input {
	position:absolute;
	width:150%;
	top:1.2em;
	left:10px;
}
</style>
</head>

<body>
<div class="wrap">
  <div class="trow single-row">
    <div class="tcell tcell1"><b>
      <label for="name">Name :</label>
      </b></div>
    <div class="tcell tcell2">
      <input type="text" size="40" id="name" name="name" value="Baja Designs">
    </div>
    <div class="tcell tcell3">&nbsp;</div>
  </div>
  <div class="trow">
    <div class="tcell tcell1"><b>Website :</b></div>
    <div class="tcell tcell2">
      <label for="pub_website">Public:</label>
      <input type="text" size="25" id="pub_website" name="pub_website" value="">
    </div>
    <div class="tcell tcell3">
      <label for="priv_website">Private:</label>
      <input type="text" size="25" id="priv_website" name="priv_website" value="">
    </div>
  </div>
  <div class="trow">
    <div class="tcell tcell1"><b>Website Longer label :</b></div>
    <div class="tcell tcell2">
      <label for="pub_website">Public:</label>
      <input type="text" size="25" id="pub_website" name="pub_website" value="">
    </div>
    <div class="tcell tcell3">
      <label for="priv_website">Private:</label>
      <input type="text" size="25" id="priv_website" name="priv_website" value="">
    </div>
  </div>
  <div class="trow">
    <div class="tcell tcell1"><b>Website short :</b></div>
    <div class="tcell tcell2">
      <label for="pub_website">Public:</label>
      <input type="text" size="25" id="pub_website" name="pub_website" value="">
    </div>
    <div class="tcell tcell3">
      <label for="priv_website">Private:</label>
      <input type="text" size="25" id="priv_website" name="priv_website" value="">
    </div>
  </div>
  <div class="trow">
    <div class="tcell tcell1"><b>Website short :</b></div>
    <div class="tcell tcell2">
      <label for="pub_website">Public:</label>
      <input type="text" size="25" id="pub_website" name="pub_website" value="">
    </div>
    <div class="tcell tcell3">
      <label for="priv_website">Private:</label>
      <input type="text" size="25" id="priv_website" name="priv_website" value="">
    </div>
  </div>
</div>
</body>
</html>

If only modern support is required then I’d probably use flexbox but columnar alignment is still easier with display table properties.

2 Likes

Hi there Paul,

I’ve been replacing the code with that which you provided, which has worked awesome until I got to a larger textbox at the bottom which needed to be as wide as tcell2 and tcell3 combined. I thought I could solve the problem by simply making a new class (called tcelltwothirds on the demo) with a width of 67% and put it in the place of the tcell2 and 3 but if you look at the demo link, this clearly hasn’t worked :slight_smile:

Is there a way for me to handle this in it’s current format or does the design need to change?

https://wheeltastic.com/popup.php

Hi,

You can’t change the width of cells independently because just like tables they are arranged in columns so all columns must match. In a table you could use colspan but we don’t have that luxury in CSS.

The only option is to use absolute positioning to span the cells but you will need to control the height on the cell to match the height of the element.

Here is another example that shows how to span the cells.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
.wrap {
	display:table;
	width:100%;
	max-width:960px;
	margin:auto;
}
.trow {
	display:table-row;
}
.tcell {
	display:table-cell;
	vertical-align:middle;
	padding:1em 10px;
}
.trow:nth-of-type(odd) .tcell {
	background:red;
}
.tcell {
	width:33%;
}
.tcell1 {
	white-space:nowrap;
	width:1%;
	text-align:right;
}
.tcell1 b {
	padding-top:1em;
	display:block;
}
.tcell label {
	display:block;
}
.tcell input {
	width:100%;
	height:2em;
	line-height:2em
}
.single-row .tcell {
	height:1.5em;
	line-height:1.5em
}
.single-row .tcell1 b {
	padding-top:0
}
.single-row .tcell2 {
	position:relative;
}
.single-row input, .single-row textarea {
	position:absolute;
	width:150%;
	top:1.2em;
	left:10px;
}
.with-textarea textarea {
	width:150%;
	height:15em;
}
.with-textarea .tcell {
	height:15em;
}
</style>
</head>

<body>
<div class="wrap">
  <div class="trow single-row">
    <div class="tcell tcell1"><b>
      <label for="name">Name :</label>
      </b></div>
    <div class="tcell tcell2">
      <input type="text" size="40" id="name" name="name" value="Baja Designs">
    </div>
    <div class="tcell tcell3">&nbsp;</div>
  </div>
  <div class="trow">
    <div class="tcell tcell1"><b>Website :</b></div>
    <div class="tcell tcell2">
      <label for="pub_website">Public:</label>
      <input type="text" size="25" id="pub_website" name="pub_website" value="">
    </div>
    <div class="tcell tcell3">
      <label for="priv_website">Private:</label>
      <input type="text" size="25" id="priv_website" name="priv_website" value="">
    </div>
  </div>
  <div class="trow">
    <div class="tcell tcell1"><b>Website Longer label :</b></div>
    <div class="tcell tcell2">
      <label for="pub_website">Public:</label>
      <input type="text" size="25" id="pub_website" name="pub_website" value="">
    </div>
    <div class="tcell tcell3">
      <label for="priv_website">Private:</label>
      <input type="text" size="25" id="priv_website" name="priv_website" value="">
    </div>
  </div>
  <div class="trow">
    <div class="tcell tcell1"><b>Website short :</b></div>
    <div class="tcell tcell2">
      <label for="pub_website">Public:</label>
      <input type="text" size="25" id="pub_website" name="pub_website" value="">
    </div>
    <div class="tcell tcell3">
      <label for="priv_website">Private:</label>
      <input type="text" size="25" id="priv_website" name="priv_website" value="">
    </div>
  </div>
  <div class="trow">
    <div class="tcell tcell1"><b>Website short :</b></div>
    <div class="tcell tcell2">
      <label for="pub_website">Public:</label>
      <input type="text" size="25" id="pub_website" name="pub_website" value="">
    </div>
    <div class="tcell tcell3">
      <label for="priv_website">Private:</label>
      <input type="text" size="25" id="priv_website" name="priv_website" value="">
    </div>
  </div>
  <div class="trow single-row with-textarea">
    <div class="tcell tcell1"><b>
      <label for="notes">Notes:</label>
      </b></div>
    <div class="tcell tcell2">
      <textarea rows="13" cols="28" id="notes" name="notes"></textarea>
    </div>
    <div class="tcell tcell3">&nbsp;</div>
  </div>
  <div class="trow">
    <div class="tcell tcell1"><b>Website short :</b></div>
    <div class="tcell tcell2">
      <label for="pub_website">Public:</label>
      <input type="text" size="25" id="pub_website" name="pub_website" value="">
    </div>
    <div class="tcell tcell3">
      <label for="priv_website">Private:</label>
      <input type="text" size="25" id="priv_website" name="priv_website" value="">
    </div>
  </div>
</div>
</body>
</html>

Of course you’d want to add media queries and set the cells to display:block,match widths and then remove the absolute positioning for smaller screens etc.

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