Jump to content

[XHTML]Each row cells aligned individually


Jack McKalling

Recommended Posts

Can I have a table like this:

+-----------------+------------------+--------+|                 |                  |        |+-------+---------+------------------+--------+|       |                            |        |+-------+----------------------------+--------+

Exept the possibility to have colspan="something" ?I mean, REALLY independant per row? :)[*Edit:]This is issued at: http://dhost.info/profmemberone/Art/text.phpRecently updated with translation!

Edited by Dan The Prof
Link to comment
Share on other sites

Isn't that just another reason for not using tables for layouts :) .Hmmm... what if width is set individually for a table cell?

Link to comment
Share on other sites

Doesn't work for any reason :)I do know that even if I did, it is not possible the way I want :)If I give one lower cell 100 width, the upper cell gets that width too, or when it is colspanned, the left part gets. Same story when I say the upper must have 200, the lower one gets affected too :) (can't really explain how, but it does)

Link to comment
Share on other sites

+-----------------+------------------+--------+|                 |                  |        |+-------+---------+------------------+--------+|       |                            |        |+-------+----------------------------+--------+

ok, nevermind that won't work. :) you could always use more than one table, but you porbably don't want to do that.LG

Link to comment
Share on other sites

It is possible though, only not precisely how I want. If I just say the lower smaller one is exactly the half of the one above, there won't be anyproblem, and just use colspan :)But what is the content messes up the width of the lower one :)I'll just use another table for the lower row, if I still want to be able to do that lol

Link to comment
Share on other sites

I think you should make a table with 500 1-pixel wide cells, and then you could say colspan="125" to make it 125 pixels wide. That's a great idea. Kind of like this JPEG to HTML table converter:http://ratfactor.com/programming/java/jpeg2table/skull.htmlSure, it turned a small JPEG into 180kB of HTML code, but it's cross-platform!!

Link to comment
Share on other sites

Anyway, is there maybe also an XHTML way of doing what I want? :)Without waisting storage that is :)I quess not, so I'll use secondairy tables, UNLESS some experts know the sollution :)

Edited by Dan The Prof
Link to comment
Share on other sites

consider it as a problem of proportions...create a blank top row of appropriate portions and then span as needed...i think this is roughly the shape you were looking for:

<html><head><title>Table Test</title></head><body><table border="1"><tr><td width="48"></td><td width="48"></td><td width="48"></td><td width="48"></td><td width="48"></td><tr><td colspan="2">a</td><td colspan="2">b</td><td>c</td></tr><tr><td>d</td><td colspan="3">e</td><td>f</td></td></table></body></html>

maybe yes/maybe no??? :)

Link to comment
Share on other sites

i noticed a few omisions in my code, cleaned it up and ran it through the xhtml validator. it didn't complain about the blank rows. the only error it cited was the use of the width attribute.however, i didn't see anything in the xhtml tutorial that would indicated that was illegal.here's the html i validated:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Table Test</title></head><body><table border="1"><tr>   <td width="48"></td>   <td width="48"></td>   <td width="48"></td>   <td width="48"></td>   <td width="48"></td></tr><tr>   <td colspan="2">a</td>   <td colspan="2">b</td>   <td>c</td></tr><tr>   <td>d</td>   <td colspan="3">e</td>   <td>f</td></tr></table></body></html>

here's the reply i got:Result: Failed validation, 1 errorFile: upload://Form SubmissionEncoding: utf-8Doctype: XHTML 1.0 StrictRoot Namespace: http://www.w3.org/1999/xhtmlNote: The Validator XML support has some limitations.This page is not Valid XHTML 1.0 Strict!Below are the results of checking this document for XML well-formedness and validity. 1. Error Line 9 column 13: there is no attribute "width". <td width="48"></td>can anyone explain the problem? :)

Link to comment
Share on other sites

well, duh...width is deprecated and i should have used style instead. this code is xhtml 1.0 strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Table Test</title></head><body><table border="1"><tr>   <td style="width:48"></td>   <td style="width:48"></td>   <td style="width:48"></td>   <td style="width:48"></td>   <td style="width:48"></td></tr><tr>   <td colspan="2">a</td>   <td colspan="2">b</td>   <td>c</td></tr><tr>   <td>d</td>   <td colspan="3">e</td>   <td>f</td></tr></table></body></html>

Link to comment
Share on other sites

You still forgot to include the unit PX in the style :)Anyway, you forget the xml validator has its limitations, and besides it follows the rules exactly. But the main idea of Xhtml was to devide structure and content from style, leaving a well organised document. And leaving empty rows is just NOT organised at all :)And you must say I have a point there :)

Link to comment
Share on other sites

Loll, I don't bother :blink: Me not exactly prof :) Only I have been member here for ages :) Number 60 :angry::blink: But that's the only advantage I have, next to my love for programming :)Besides, I have been programming html and almost Xhtml right away sinds years ago, so I have pretty a lot knowledge of the language :blink:

Link to comment
Share on other sites

i just got to thinking...you've never told us why you wanted something in this format or whether it had to be a table, but i was wondering if you couldn't use containers to achieve exactly the layout you're after...you know, like the old saying, "a little div will do ya??? :)

Link to comment
Share on other sites

Maybe.Well, I'll explain what the table was for.I have no microsoft word or office on my computer, but I won't go in to that right now. I thought about all those works I had to do for school, such as wrighting texts within a certain range of words.Well, notepad nor wordpad support words or character counting :)So I made one myself :) *prideness*Check this: iNotePadRemember it is dutch, and probably hard to understand, but the buttons should be easy. "Woorden" is dutch for words, "Tekens" is the same as characters, "tellen" is dutch for counting or to count, for the rest, there are also buttons like "PHP inkleuren" (php code highlight), and "Reset" or "Legen" (same) that reset form or entire page. It is able to count words in a simple but long text, same for characters, colorise php code, and last but not least, split text into paragraphs :)Just notice all those submit buttons, they are in that table. (Maybe the page changes now and then, while I am perfectionist, you understand)There are two rows of buttons, and each has its own cell.If you remember the simpel table drawing:

+-----------------+------------------+--------+|                 |                  |        |+-------+---------+------------------+--------+|       |                            |        |+-------+----------------------------+--------+

If you count the first two cells in each row, you see thay are not alligned in a straight line. The upper right is wider than the upper left. If they are in the same table, the wider part of the upper right gets not on top of the lower left one, but to the right, leaving white space. (grey, but whatever)

Edited by Dan The Prof
Link to comment
Share on other sites

dan,your little text word counter, etc. is clever so you may give yourself one back pat. just please be careful not to break your arm in the process.what is "Resultaatblok pixelbreedte:" and why is it set to 500? is that the maximum number of characters?finally, i'm not quite sure i see your dilemma...are you trying to get the buttons to line up in a certain way or what?just a couple of general design throughts:you should always have the text on one side and the button on the other throughout the entire form, that is:text [button] text [button]text [button] text [button]not:text [button] [button] text[button] text text [button]that sort of layout is confusing to the user.also, you should not have some buttons contain the entire text and others be a mixture of separate text and button text. also hard on the user.you may want to consider checkboxes. for example:Count: Reset:Words [cb] Form [cb]Characters [cd] Page [cb][Count 'em] [Do it]give me some more clues as to what you want the final product to look like. you've got me curious.

Link to comment
Share on other sites

Your're right in most the things you said, but in general, this page is only for privat use, not commercially, although it may be used as such.I thought it was pretty handy to have some sort of advanced text writer.."Resultaatblok pixelbreedte" or something like that is the width of the resultblock, in pixels. Does only count for the PHP colorise and the split into paragraphs functions. It does not matter how the buttons and text are sorted, if they all are placed as you said. It is Dutch, and for us it should be very understandable. Though I might change it, I put the buttons like this because elseways the text combined with the button values would not make much gramatical sense :)I liked to have the text with button in the second cell of the first row, shift a little to the left, whiule right now its very left is precisely aligned to the right of the lower left cell. It should actually cascade the lower left cell, horizontally. (how do English explain waht I mean? :) )Now it is like this:

+-----------+-----------+| some      | something |+-----------+-----------+| something |      some |+-----------+-----------+

But It should be something like this:

+------+-----------+| some | something |+------+----+------+| something | some |+-----------+------+

Not to mention it should leave width unused to the right of this thing, which is the left part, so in case of the online document leave space in the middle of the table. Without using colspans :)width does not have affect on cells like this, while width may not affect the columns.

Edited by Dan The Prof
Link to comment
Share on other sites

i think i understand what you're trying to achieve...in essence, snugged up buttons/text, so that: button/text | longer button/text ------------------------------------ longer button/text | button/textis the result.since this is for personal consumption, i suppose there's no problem with trying to achieve it but i have no idea as to how you might without using containers or, in a table, colspan.but i must say that from the basis of general good design, it's not a very desirable goal.of course, english is my language so that i may be handicapped by a lack of understanding of the dutch language and dutch preferences in terms of how things are laid out.on those occasions when i'm doing something for purely personal consumption, i still try to use good fundamental design principles...it makes sure that i stay in practice and don't get sloppy, plus, in case i'm accidentally brilliant, i can release my work to others without the need to redesign. :)

Link to comment
Share on other sites

Haha, lol :) But I can't say you're wrong. I hope there may be someone who can tell me how to do just what you explained, snugging up the text/button (what is snugging? :)).As I generally only use tables and not divs, as I would have to define a load more style, I liked to know if this was possible using those, this is not the first time I bumbed into this, sort of, problem.

Link to comment
Share on other sites

Still no one who knows how to cascade some cells in a column of a table? *or how do I say that*To make it easier for you all english, I made a special translation code for the page. See the two links English (EN) and Dutch (NL)(shortcut: http://dhost.info/profmemberone/Art/text.php?english=true)Next, I added the box-and-widthcontroll function previous only available in the Split function, to the PHP Colorise function. Remember PHP is code, and code can harldy be split. Also text cannot be colorised, so split only text, and colorise only code (php tags mandatory).

Edited by Dan The Prof
Link to comment
Share on other sites

The only way to do it with tables is to use 2 different tables on top of each other.Back in the day when I still used tables regualrly this is how I acheived such a goal.

Link to comment
Share on other sites

Best sollution, pity it can't be done like this: <table columns="loose">or: table { columns:loose; }Oooh :)I just remembered something :) Why isn't there such body { cellspacing:4px; cellpadding:1px; } ?:)

Link to comment
Share on other sites

Best sollution, pity it can't be done like this: <table columns="loose">or: table { columns:loose; }Oooh :)I just remembered something :) Why isn't there such body { cellspacing:4px; cellpadding:1px; } ?:)

because you can just do this
td{margin:4px;padding:1px;}

Link to comment
Share on other sites

I should have known that :)Okay, my question is then now answered. But I like to continue chatting about the page lol :)What do you think of it right now, while it has been translated into your language? :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...