473,545 Members | 289 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

how to move <table *cols=2*> to css?

hi all, i'm here again.
i couldn't find/understand this on w3c css2 recommendation and
documentation, then here i ask.

i decided to still use some tables in my pages for some forms. i
played around with divs and whatever else for some time, but getting
things done correctly across multiple browsers requires too much time.
with tables, things come pretty easy and, since i'm using these only
inside our company, this is 100% ok. i mean: for this application this
is the best and easiest way to do the things, even if i know there are
better ones.

i'm using css2 for colours, paddings, margins, sizes and so on because
of their flexibility and comfort when needing to change something.
being w3c-anything-compliant at the moment isn't important --even if
my pages are validated by w3c, just to loose few minutes to check.

i have some classes for tables and td's that i'm using for the tables
containing the forms; however, i couldn't understand how to specify
number of columns in the tables' classes.

i seem to understand that there is no attribute for a td class to tell
the browser that those cells needs to span over a number of columns
(or rows, sometimes), then that i have to keep the rowspan's and
colspan's inside the html.

in other words, i need the css "equivalent " for the attribute
"cols=xx" of a <tabletag and, if it exists (but i don't think so),
the css "equivalent s" for the attributes "colspan=xx " and "rowspan=yy "
of a <tdtag.

as always, i'll appreciate any suggestion.

we're closed for holidays during these days, then i may not be able to
read your replies (and to thank you) until next week. i'll do my best
to use some online news service like google groups (even if with a
mobile it's all but easy here in italy :)

regards,
--
Gianni Rondinini (31, tanti, RA)
Nikon user - Bmw driver
http://bugbarbeq.deviantart.com
Aug 9 '06 #1
8 3171
Gianni Rondinini wrote:
i have some classes for tables and td's that i'm using for the tables
containing the forms; however, i couldn't understand how to specify
number of columns in the tables' classes.
The number of colums that a given cell spans is a matter of semantics
("This bit of data relates to both these columns of data"), not a
matter of presentation, so CSS is the wrong tool to specify this.

Aug 9 '06 #2
Gianni Rondinini schrieb:
in other words, i need the css "equivalent " for the attribute
"cols=xx" of a <tabletag
There is no cols attribute for the table element in HTML.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Aug 9 '06 #3
Gianni Rondinini <bu*******@icem .itwrote:
>in other words, i need the css "equivalent " for the attribute
"cols=xx" of a <tabletag and, if it exists (but i don't think so),
the css "equivalent s" for the attributes "colspan=xx " and "rowspan=yy "
of a <tdtag.
If tables are used correctly, then colspan and rowspan provide
structural information that belongs in the markup, not in an optional
styling language such as CSS. There are no equivalents for these table
properties in CSS.

--
Spartanicus
Aug 9 '06 #4
Gianni Rondinini wrote:
i have some classes for tables and td's that i'm using for the tables
containing the forms; however, i couldn't understand how to specify
number of columns in the tables' classes.
You don't. Rowspan and colspan aren't just presentational suggestions.
They are an intrinsic structural property of a table cell defining the
relationship of its content to the remaining data in the table. They
belong in the HTML and will remain there as attributes of the TD and TH
elements.
Aug 9 '06 #5

Spartanicus wrote:
Gianni Rondinini <bu*******@icem .itwrote:

If tables are used correctly, then colspan and rowspan provide
structural information that belongs in the markup, not in an optional
styling language such as CSS. There are no equivalents for these table
properties in CSS.
In CSS you can replicate a typical newspaper layout with a headline
spanning two (or more) columns, but in CSS you have to force floating
divs to make it happen which is why CSS is actually not perfect for
mark-up.

What you would do is:

<h1 style="width: 100%">Title for this area</h1>
<div style="width:10 0%">Summary paragraph ...</div>
<div style="width: 49%; float: left">Column 1</div>
<div style="width: 49%; float:left">Col umn 2</div>

As can be seen, this is clearly a style issue and not a semantic one
since semantically it reads perfectly. However to make sense on the
displayed page,you have to control the break point for the column in
the content - which therefore involves making a styling decision within
the content - not a true style/semantic separation (yes I know tables
force this on you too).

For spanning rows (eg for a sidebar) you can float the side bar:

<div style='width:20 %; float: right'>Sidebar contents</div>
<p>Main text paragraph1</p>
<p>Main text paragraph2</p>

However this floating divs solution now forces the problem that the
semantically the side bar comes before the content, when you would
expect it to be maintext1 maintext2 sidebar.

Ideally you would use:

<p>Main text paragraph1</p>
<p>Main text paragraph2</p>
<div style='width:20 %; float: right'>Sidebar contents</div>

But it won't work as the right float will happen after display the
paragraphs. You can use absolute positioning but I really advise
against it as a layout method (eg what happens if someone wants a
larger font size). Again CSS is forcing a style decision into the
content.

The other thing is the sidebar will only be the length of the text it
contains. You can force the height of the sidebar to try to get a
tabular display but you don't know the height of the text in the
paragraph - which will depend on the font size. If I remember sometimes
height: 100% might work within a containing div holding the whole of
the page, but I don't think it's consistent across browsers.
Saul
www.notanant.com

Aug 9 '06 #6
hi all.

i've read all your replies and thank everybody for explanations.

i'm happy i was right about the impossibility to specify colspan and
rowspan in css's: i'm not completely stupid, then :)

about the first question, that is the one in the subject, i want to
say that once there was the possibility to specify a table this way:
<table class="blah" cols="nn">
to tell the browser that the number of columns of that table is nn.
this allowed (and still works) the browser to show the table *while*
it was loading and not only after the whole thing was received by the
browser.
this is still useful because unfortunately broadband dsl's still
aren't available everywhere (in italy, at least) and seeing a table
growing while you receive it may be a nice thing for the user.

i'm working on some heavy pages that are used only by my workers, but
they see them both when inside our company and when they're somewhere
else and are using our intranet with a mobile phone, which offers a
very limited bandwitdh.

this is why i always used the "cols=nn" attribute in html (perhaps
it's deprecated, but still does its work) and wanted to move it in
css, since it makes my pages non-html-strict. being validated doesn't
add any real value to my intranet, but this is something i would have
liked.

thanks in advance, as usual.
--
Gianni Rondinini (31, tanti, RA)
Nikon user - Bmw driver
http://bugbarbeq.deviantart.com
Aug 21 '06 #7
Gianni Rondinini schrieb:
this is why i always used the "cols=nn" attribute in html (perhaps
it's deprecated, but still does its work)
It's not deprecated because it never existed in HTML (as defined by the
specification).
and wanted to move it in
css, since it makes my pages non-html-strict. being validated doesn't
add any real value to my intranet, but this is something i would have
liked.
Maybe you should have a look at the table-layout property
(<http://www.w3.org/TR/REC-CSS2/tables.html#pro pdef-table-layout>).

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)
Aug 21 '06 #8

Johannes Koch wrote:
Maybe you should have a look at the table-layout property
(<http://www.w3.org/TR/REC-CSS2/tables.html#pro pdef-table-layout>).
This is rarely supported for CSS rendering of HTML.

It came about because of possible past intentions of using CSS to
render non-HTML XML directly. As HTML already has a <tableelement to
use, there's no real need for it and so it didn't get used or
implemented. I'd recommend avoiding it.

Aug 21 '06 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
2490
by: Philo | last post by:
How do I select all <div> tags except those which contain a <table> tag somewhere within them? Example XML: <********************** sample input ***********************> <txtSectionBody> <div> <span>
8
4651
by: bearclaws | last post by:
I am looping through a list of categories and want to display the list horizontally (instead of vertically). I want to create a single row with 4 list items in each cell of the row. I thought this would work but I get this error: "End tag 'xsl:if' does not match the start tag 'ul'." Any thoughts?
3
84575
by: Paul Thompson | last post by:
When I put a <div ...> inside a <table> specification, functionality is not there. When I put the <table> inside the <div> everything works. Why is that?
61
24402
by: Toby Austin | last post by:
I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will 'stretch'</td> <td valign="top" width="300">some data that won't 'stetch'</td> </tr> </table>
19
17347
by: CMAR | last post by:
I have the following markup. The problem is that the browser, e.g., IE6, inserts several lines of blank space between the <div> and the following table. Is there a way to minimize that vertical spacing? Thanks, CMA <div class="vlgray">Condition</div> <table cellpadding="0" cellspacing="0">
10
26070
by: BuddhaBuddy | last post by:
Platform is DB2/NT 7.2.9 The table was created like this: CREATE TABLE MYTEST ( MYTESTOID bigint not null primary key, FK_OTHEROID bigint not null references other, FK_ANOTHEROID bigint not null references another, FK_LASTLYOID bigint not null references lastly, unique (FK_OTHEROID,FK_ANOTHEROID))
0
1296
by: timnels | last post by:
I've got a bizzare issue where I have an XML file to load into a data set like: <conversion> <table name="parent"> <table name="child"> </table> </table> <table name="another parent"> ....
1
2206
by: prefersgolfing | last post by:
I'm not using Master Pages, yet I'd like to display the contents of an HTML page within a <table><tr><td> on a .aspx. I have a lengthy guide already paginated in html. I'd like to embed the pages "as is" in the new 2.0 app without using Master Pages or creating new ..aspx's. I'm looking for the quickest way to the finish line. Any...
3
5734
by: PYG | last post by:
Hi everybody I have a simple question : If i use this code : <body style="font-size:24px;color:blue;"> Text in body <table> <tr><td> Text in table
0
1837
by: =?Utf-8?B?R3JlZw==?= | last post by:
I've created my table and alli is fine. I name my <tdtags to make them easier to identify when my table gets large. Anyway, I am naming as such: <td id="cellName" > Now, sometimes when make a change to a control my whole table gets resized and screwed up from some reason. I may have a column with a width of 75px, but it will appear so...
0
7465
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7398
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7805
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7416
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
1
5325
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
4944
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3441
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1878
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1013
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.