Is it possible to have rowspan="2.5"? I using this in creating a timetable using HTML tables. I have 1-hour interval and I need to show a time with 30-mins. How can I do it?
No, it's not possible to have decimals for rowspan/colspan values. Not only does the spec say so (they must be integers), but that wouldn't make sense.
What you can do instead is simply make each row 30 minutes instead of an hour. Then, just double that rowspan (5 instead of 2.5).
Or you could go for an illusion. Nest another table with two rows inside your td. Have the upper row use the background-color of the td above it, and apply this rule to the lower row.
That way you won't have to completely rewrite your tables. It's a lazy way, true, but I see no reason why it would not work.
Related
is it possible to use CSS3 table to make it look like this
+---A---+---B---+---C---+---D---+---E---+
>>>>+---A---+---B---+---C---+---D---+<<<< ---> case 1
+---A---+---B---+---C---+---D---+---E---+
case 1: need to margin-left the first cell right? is it any code that make auto to margin
+---A---+---B---+---C---+---D---+---E---+
+-----A-----+-------B-------+---C---+-D-+ ---> case 2
case 2: colspan is work on the cell width is same. what if the cell width is vary. Is it possible?
all of this code must be in CSS3 and HTML5 only. No use <table>, <tr>, <td> only <div>
Should I convert to use grid instead of using table?
Thank you.
Use tables if it is tabular data, if it isn't then use something else.
From your example where column widths don't match, and where colspans don't do what you want it's hard to see how the data could be tabular data.
A couple of options, colspan can work if you do it the right way. For example setting a colspan of 2 on normal single span cells would allow you to make other cells span to halfway through another column.
Or if it really isn't tabular data then use DIV's and position them apropriatley.
Using tables, you would not be able to vary the width of one rows cells without affecting the width of all the other rows cells though, im not even sure you can dynamically change colspan once the table has been drawn, never tried it to be honest).
In all honesty I suspect you are really looking to solve this using DIV's, as your data really doesn't seem to fit the tabular data model. Tbular data will generally have headers on columns with data corresponding to those column headers in the appropriate column. Your cells seem to be able to move freely and therefore would not be fixed under any particular column header.
I am guessing from the layout that you are possibly creating some sort of calendar? and events can span any distance of time etc across the columns? In which case I personally would prefer divs, although I know some people would prefer using tables.
I'm making a table with:
days as columns
times as rows
and the table data will be empty, styled anchors (changing between dots, lines and blocks).
When the display gets down to tablet/mobile size I want hide all but one of the days (columns).
As I understand it, as it is very obviously a table, I should probably use the table element. However hiding/styling tables/columns is problematic. I'd like to steer away from applying a column class to each td and I probably need to support ie8 so nth-child is out of the loop and col is too limited for the styling I need to do http://www.quirksmode.org/css/columns.html.
So my question is; should I pursue the applying classes to td's or what is the most semantic alternative?
Edit:
I think I've decided to go with nested ul's. I'm sure semantically it's not correct but in terms maintainability I think using tables would nigh on impossible
Think you are unlucky. Just add a class to all the td's in a column. This is the best backwards compatible solution there is.
Here you can read all about 'ways to hide first column' on Stack Overflow.
I'm working on constructing a table using only divs. I began creating the table using percentages to set column widths, but would prefer to just use table-cell and not have to worry about things that way. Only problem is I'm not guaranteed to have the same number of elements in every row.
http://jsfiddle.net/JWvLX/
This example shows what is currently happening in the top two rows, and what I want to happen if a cell is removed/not present in the bottom two rows.
What exactly do I need to do to accomplish this? Is this possible using only divs for tables or will I be forced to use actual tables to get the desired effect.
There's no equivalent for colspan/rowspan in CSS tables, but this Sitepoint post has some trickery you might be able to use.
I'm creating a table in an asp.net code behind dynamically, and I want to have a footer row that only has 2 cells. The first should span all the columns in the table-1. Is there some way other then keeping track of the # of columns in the table manually for me to set the colspan to be # of all the columns in the table-1?
Preferably a HTML or CSS solution?
Colspan can't be done with CSS. It's structural rather than stylistic so it's pure HTML.
No you can't specify "all but one" as a colspan. The best you can do is colspan="0", which will span the remaining columns in the column group but to take advantage the <colgroup> at the top will need to know the number of columns anyway and be define statically.
See Tables in the HTML spec:
colspan = number [CN]
This attribute specifies the number of
columns spanned by the current cell.
The default value of this attribute is
one ("1"). The value zero ("0") means
that the cell spans all columns from
the current column to the last column
of the column group (COLGROUP)
in which the cell is defined.
But basically this just kicks the can down the street and I don't know what the browser support is like so it doesn't necessarily buy you anything.
You'll either need to know the number of columns when you generate the HTML or use Javascript.
Sorry this isn't an HTML or CSS solution... I'm only suggesting it because I don't think there is an HTML or CSS solution that will work cross-browser/cross-broweser version.
You could convert the table to an Asp:Table and then use the first row's Cells.Count...
But it would probably be more work than tracking the number of columns added the way you're doing it now. BUT it would not depend on Browser support as it would all be in the code-behind.
In case anybody else winds up here in the future, colspan=0 isn't supported in HTML 5. There are more details here: https://stackoverflow.com/a/52355253/18494923
<tr><td colspan="100%">1000</td></tr>
From question: Colspan all columns
Works in IE 7/8 & Firefox 5
I need some help with aligning two tables together, i.e: having the columns line up.
The first table has the headers, and the second table has the rows displayed. I'm doing this on ruby, so, I have to put the result in another table because the updating won't work otherwise(puts the data away from the parent table..) Is there a way, that I can have the two tables align, so the data for every row lines up with each header column.
Thank you
The easiest way would be to have fixed widths for the cells and make the widths be the same for both tables. Also make sure that you have the table properites be the same (i.e. the cellpadding, cellspacing and table widths )
can't you just remove the closing tag for the header and remove the opening tag for the content?
It’s not a great idea, HTML-wise. Heading cells and data cells should really be in the same table. Then you get the alignment for free.
“ I'm doing this on ruby, so, I have to put the result in another table because the updating won't work otherwise”
Are you entirely sure there’s no way for Ruby to update an HTML table that has header cells? Really?