Rowspan on a single td table failing - html

I'm echo'ing my table through PHP
Table consists of single td tr's all displaying a 30-minute block
When a reservation consists of an hour I want the td to overlap on the next 30-minute block but I cant' seem to figure out how rowspan works
https://jsfiddle.net/ravf1r3v/4/
Create a small fiddle with single td table
<table>
<thead>
<tr>
<th>Plein
</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">dklsfjsd</td>
</tr>
<tr>
<td >dklsfjsd</td>
</tr>
<tr>
<td>dklsfjsd</td>
</tr>
</tbody>
</table>

Try adding a blank <tr></tr> below the element with rowspan.
Small hack!!
This fiddle will help you understand,
https://jsfiddle.net/josangel555/maajf47p/2/

Add one more td tag to the other rows. Do it this way.
<table>
<tr><th>Plein</th></tr>
<tr><td colspan=2>One Hour</td></tr>
<tr><td>1/2 Hour</td><td>1/2 Hour</td></tr>
</table>

Related

Can you make 2 cell 1 on the other within one tr tag?

What I want is something like this:
<table>
<tr>
<td>a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
</tr>
</table>
which creates a table like this:
but what I want is something like this:
I know I can easily make it with adding a new row and using rowspan to fix it, but if there is another way to do it without adding another row, it will be so great
You can implement that using rowspan.
<table border="1">
<tr>
<td rowspan="2">a1</td>
<td>a2</td>
<td rowspan="2">a4</td>
</tr>
<tr>
<td>a3</td>
</tr>
</table>
the answer I got after so many searches was this 2 without adding another Row:
adding both a2 a3 to another cell.
using grid system instead of table.
and there are other ways and the easiest ways is by adding another row, the code looks like this:
<table>
<tr>
<td rowspan="2">a1</td>
<td>a2</td>
<td rowspan="2">a4</td>
</tr>
<tr>
<td>a3</td>
</tr>
</table>

Table row span cell span

This is an assignment I need help with. I hate tables as is, but this is what it says:
"The first row in each table consists of one table cell which spans two columns that contain the real estate listing name. The second row in each table consists of two table cells."
My code:
<table>
<tr>
<th>
<h3>TEST</h3>
</th>
</tr>
<th rowspan="2"></th>
<td>Something here !</td>
</tr>
</table>
Just wanted to verify if I did this correctly? Here's the full code:
http://jsfiddle.net/4jzUc/
also, it's supposed to look like this: http://screencloud.net/v/aA5Y
You want to span the column, not the row (colspan vs rowspan). I think this is what you are looking for.
<table>
<tr>
<th colspan="2">
Title
</th>
</tr>
<tr>
<td>First cell</td>
</tr>
<tr>
<td>Second cell</td>
</tr>
</table>
No, your markup is not correct. It does not even comply with the HTML table model, as you can see by using http://validator.nu on your document with <!doctype html> slapped at the start. Still less it does do what the assignment calls for.
The assignment as such is very simple: you just a table with two rows and two columns, just so that the first row has only one cell, which spans two columns:
<table>
<tr><td colspan=2>Real estate name
<tr><td>A table cell <td>Another table cell
</table>
You could use th instead of the first td, since it is kind of a header cell, but beware then that this makes its content bold and centered by default (you can override this is in CSS).
As per the “supposed to look like” link, it seems that you are supposed to put an img element only in the first cell of the second row, and the second cell there contains text and a ul element. And a little bit of CSS too. Note that for this output, you will need to align the second row vertically to the top (using the HTML valign attribute or the CSS vertical-align property).
correct code:
<table>
<tr>
<th>
<h3>TEST</h3>
</th>
<th rowspan="2">RowSpan2!</th>
</tr>
<tr>
<td>Something here !</td>
</tr>
<tr>
<td>Something Else !</td>
</tr>
</table>

Skip <td> in HTML table

Say I have the following table:
<table>
<tr>
<td>Example</td>
</td>One</td>
</tr>
<tr>
<td>Example</td>
</td>Two</td>
</tr>
<tr>
<td>Example</td>
</td>Three</td>
</tr>
<tr>
<!--
Here I want to skip the first <td> cell; use only second. Example:
<td>(empty, possibly )</td>
<td>blah blah blah</td>
-->
</tr>
</table>
If you read my comment in the last row, you can see that in the last row I want to display something in the second column of the table, with the first remaining empty. How would I go about doing this?
As a side note, I read the question/answers in this SO question but colspan is different from what I want. I'm also not familiar with css empty-cell so if that is a solution, please provide a bit of sample code.
HTML
<tr>
<td></td>
<td>content here</td>
</tr>
CSS
table { empty-cells: show;}
Leave the <td> empty, no reason to put a space in there. can act a bit funny at times, especially in tables.
I can't see any reason not to do exactly what you are proposing: Use an empty cell containing only a ("No Break Space") in it:
<tr>
<td> </td>
<td>Whatever</td>
</tr>
CSS code:
table { empty-cells: show; }
Or, alternatively, you can insert in the <td>.

Error stylesheet when using rowspan in table tag?

I have a sample code:
<table border="1">
<thead>
<tr>
<th></th>
<th>Brand name</th>
<th>Model name</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2"></td>
<td>HTC</td>
<td>P6300,
Advantage X7500
</td>
</tr>
<tr>
<td rowspan="7"></td>
<td>Samsung</td>
<td>
M2710 Beat Twist,
I7500 Galaxy,
M7500 Emporio Armani,
Galaxy Ace Plus S7500,
S5610,
P7500 Galaxy Tab 10.1 3G,
S7230E Wave 723
</td>
</tr>
</tbody>
</table>
But result is error stylesheet:
OUTPUT is:
You must have the same number of td tags in each row. This includes what you have with rowspan.
You can't have rowspan in the first row and then have a td in that spot in the next. Take out <td rowspan="7"></td> because there is a td in the row above with a rowspan attribute already accounting for this one.
In your code, you have the rowspan 2 td (the thin one) and then your rowspan 7 one (empty square to the left of Samsung), and then the two tds with the data. This extra td (the rowspan 7 one) pushes the others to the right.
Demo
The other thing you might want is the model name text is all in one line. You should put <br /> after each line to make it show like that in the browser.

HTML Table issue

I have a HTML table issue that I'd like to understand better.
Let's assume that I have a 3 row HTML
<table>
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<td colspan="2">A very loooooooong string here</td>
</tr>
</table>
With a very long text, the contents in the first 2 rows appear like they are nearly centered. However, if I move the whole "A very long string" <td> into a separate <table> inside the row, I see that the other content doesn't center. Why is the display different when the <td> content is inside another table?
If your question ends up with 2 tables, with the original like this:
<table>
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
</table>
And the looooong text into its own:
<table>
<tr>
<td colspan="2">A very loooooooong string here</td>
</tr>
</table>
Then the reason why the first two lines of the first table no longer look like they're centred is because they're not - ONLY if you're comparing relative to the second table.
If you debug with border="1" in your TABLE attributes, you will see that the table that they are contained in collapses to the widest possible table data cell. Because of this, they don't look like they're centred, even though they still are.
Add some arbitrary width to the first table and you will see that they are still centred.
Can you please provide your second example? When I created the following, it still looked the same. There's a chance you didn't properly embed the table within a table cell with a colspan of 2.
<table border="1">
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<td colspan="2">
<table border="1"><tr>
<td>A very loooooooong string here</td>
</tr></table>
</td>
</tr>
</table>
When explaining an issue with HTML, it is best to indicate which browsers were used to test...
Anyway, I did a quick test with FF3 and IE6, and I don't see the behavior you describe: with nested table, the long string has slightly more padding but the other content is still visually centered.
You should show your other code. Mine is:
<table>
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<td colspan="2"><table><tr><td>A very loooooooong string here</td></tr></table></td>
</tr>
</table>
I think I know what you mean, is the second part of your question based on:
<table>
<tr>
<td style="text-align:right;">A1</td>
<td>A2</td>
</tr>
<tr>
<td style="text-align:right;">B1</td>
<td>B2</td>
</tr>
<tr>
<table><td colspan="2">A very loooooooong string here</td></table>
</tr>
</table>
then I guess the reason the table contents are rendered left-aligned is that the inner table tags are hiding the colspan from the outer table.
The answer is to stop using html to style your table and to use CSS instead!