Sorry to ask this simple question. But I seem not to be able to find some reasonable answer to it.
I want to make a table with 3 columns but all three having different number of data. say, 1st column has only 1 data. 2nd one has 3 and 3rd one has also 3 data. It should look like this:
is there another way than defining empty tds for the first and second tr to create empty slots?
You can use rowspan http://jsfiddle.net/vB2jY/
This will make the td cell occupy the number of rows mentioned.
<table>
<tr><td rowspan="4">1</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
I think a table is best suited only for displaying tabular data, and not complex layouts like what you describe.
Still you can achieve this by using the rowspan attribute for the data in the first column, to extend to 3 rows.
Related
so is it basically a normal table with an extra header with columns and rows grouped at the end, it is possible to do something like this in HTML or maybe using css?
If you use rowspan you can make it work
<td rowspan="3"></td>
Will make a cell in one column span 3 rows. Read up more here: https://www.tutorialspoint.com/What-are-table-rowspan-and-colspan-in-HTML#:~:text=The%20rowspan%20and%20colspan%20are,3%20will%20span%20three%20columns.
I have a form which consists of a table. The table is generated with an iterator over a java collection. The elements which are generated on each iteration are:
<tr>
<th>Element name</th>
<td>Element value</td>
</tr>
The table and /table tags are outside the iterator obviously.
The problem is that I need to have the table in two columns, in some cases.
Something like this: http://jsfiddle.net/S32p2/
Is it possible to achieve this without the use of nested tables?
What makes it complicated for me, is that sometimes there are no fields at all, sometimes there should be one column and sometimes there should be two, based on the elements which are iterated over.
Also I am aware of this question: How to have one html table split into two sections, side by side?
The problem is that I don't want the columns to be based on some predetermined length, but the second column should be made based on the values iterated over, as already mentioned earlier.
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 trying to build a screen like this:
How can I split my cell in several rows and a column, without disformat my other table components?
I already started, but when I split my cell, my table disformat.
http://jsfiddle.net/KMjm6/
Take another example, without the use of html table: http://jsfiddle.net/Gh6mB/8/
If could understand your question
DEMO: http://jsfiddle.net/KMjm6/4/
Put a table inside the middle cell and create your affect
Try to use Tableless Layout concepts.
Only div elements without tables.
See this web sites
http://www.w3.org/2002/03/csslayout-howto
http://girlswhogeek.com/tutorials/2006/create-a-tableless-css-layout
Now I understood
See example http://jsfiddle.net/7SGDW/
I need to produce a table similar to:
What we see is the left column containing the data point headers, and each column after contains the actual data.
I'd like to treat each column (other than the first one) as an optional column. The user can add or remove the columns based on funds they select. If they've selected only 1 fund, only the first 2 columns are visible, the rest of the spaces are blank. Each subsequent fund selection adds a new column to the table, up to a max of 5.
I'm wondering what is the best way to implement this? I'm thinking each column is an independent table of a fixed width that I can add to a container which can align them side by side. Will I have difficulty getting the 6 tables to line up side by side?
Is there a better way for me to achieve this result?
You could have invididual tables, or you could assign each column a class which would then allow you to add or remove all elements that have that class using Javascript.
For example:
<table>
<tr><td class="col1"></td><td class="col2"></td><td class="col3"></tr>
<tr><td class="col1"></td><td class="col2"></td><td class="col3"></tr>
</table>
You could then use Javascript to show/hide elements (via CSS) with the relevant class based on actions of the user. Depending on how big your table is, that could work.
Nice use of Comic Sans by the way!