Table row span cell span - html

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>

Related

How do I add two rows in a single cell using html

I want two rows in single cell.
This is the code I have written. I have used rowspan to increase the cell width.
<tr>
<th rowspan="2">Questions</th>
<th>sub1</th>
<th>sub2</th>
<th>sub3</th>
<th>sub4</th>
<th>sub5</th>
<th>sub6</th>
</tr>
I have tried to add the staff but I did not get the way I want.
This way you can add two rows in a single cell using html
<tr>
<th>
<table>
<tr>
<td>sub1</td>
<td>sub2</td>
</tr>
<tr>
<td>sub3</td>
<td>sub4</td>
</tr>
</table>
</th>
<th rowspan="2">Questions</th>
<th>sub1</th>
<th>sub2</th>
<th>sub3</th>
<th>sub4</th>
<th>sub5</th>
<th>sub6</th>
</tr>

How to specify table column width to a fixed size in HTML?

I have a table just with a couple of rows and columns in it. What I am stuck with is the width of the column whenever the length of the field increases
So, say, just for instance, I have a table as:
<table>
<thead>
<tr>
<th>column1</th>
<th>column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>valuenfkdkfkdsnfndfndnkffdfndsfnndfnksfnfsfsdnsffs</td>
<td>value2</td>
</tr>
</tbody>
</table>
with a value which has field length of 35-50 characters like the one in the first "td" tag, the table goes out of the prescribed webpage area.
I used {word-wrap: break-word;} but there seems to be no effect. Is there a way to cut of the field length to the next line whenever this is the case and set the column width to a fixed size?
You might be looking for CSS property table-layout:fixed
<table class="users" style="table-layout:fixed;">
<tbody>
<tr>
<td>0001</td>
<td>Johnny Five</td>
</tr>
</table>
OR
CSS:
table.users{table-layout:fixed;}
Source: https://css-tricks.com/fixing-tables-long-strings/

How can I make a HTML table with headers in one vertical column?

I want to make a HTML file that has the headers in one vertical column, and the data in the column to the right. There will only be 2 columns in total. I've looked at the html docs and seen stuff about scope, but I'm not entirely sure how to use it in this context. Example:
The HTML is pretty straightforward, just be sure to use the [scope] attribute to specify the correct orientation of the table.
<table>
<tbody>
<tr>
<th scope="row">City</th>
<td>$city</td>
</tr>
<tr>
<th scope="row">Latitude</th>
<td>$latitude</td>
</tr>
<tr>
<th scope="row">Longitude</th>
<td>$longitude</td>
</tr>
<tr>
<th scope="row">Country</th>
<td>$country</td>
</tr>
</tbody>
</table>
From the docs for the [scope] attribute:
The row state means the header cell applies to some of the subsequent cells in the same row(s).
You can create the tables with elements proceeded by elements like so:
<table>
<tr>
<th scope="row">Category 1</th><td>data1</td>
</tr>
<tr>
<th scope="row">Category 2</th><td>data2</td>
</tr>
<tr>
<th scope="row">Category 3</th><td>data3</td>
</tr>
Here is an example of it in action:
vertical headers

HTML: Width for a td independent of the upper tr?

if i have a table like following, I didn't make it to define a special width for a single element. Is this possible?
For illustration, i've tried it like this:
<table border="1">
<tr>
<td>Bla</td>
<td>_____________________________________________________</td>
<td>Bla2</td>
</tr>
<tr>
<td>Blub</td>
<td style="width: 100px;">Bli</td>
<td>Hello</td>
</tr>
</table>
Is this possible?
Not really, no. The only thing that exists is the colspan and rowspan attributes that can make a cell span across two columns like so:
<table border="1">
<tr>
<td>Bla</td>
<td>_____________________________________________________</td>
<td>Bla2</td>
</tr>
<tr>
<td colspan="2">Blub Bli - I will span across the whole large line!</td>
<td>Hello</td>
</tr>
</table>
but the exact thing that you want - being completely flexible in cell widths - can be achieved only by two separate tables.
Since you have not specified width explicitly, your other TDs will also be as large as the largest one:
<td>_____________________________________________________</td>
Same is the case with table tag because you have not set width for it too.

Are table headers only for the top row in html?

I always see the th tag only used in the first row of the table. Is there some specific reason why it can't be used to create 'left' headers along the leftmost column. Is this bad form, or is this ok.
Basically, a table with headings on the top row and the leftmost column, with the very top left square being empty.
e.g.
<table>
<tr>
<th><!--empty--></th>
<th>Top 1</th>
<th>Top 2</th></tr>
<tr>
<th>LeftHeader?</th>
<td>data1</td>
<td>data2</td></tr>
</table>
That's valid, however, when using a <thead> it has to be the first row. This is valid:
<table>
<thead>
<tr>
<td>0,0</td><td>1,0</td><td>2,0</td>
</tr>
</thead>
<tr>
<th>0,1</th><th>1,1</th><th>2,1</th>
</tr>
</table>
But this is not:
<table>
<tr>
<td>0,0</td><td>1,0</td><td>2,0</td>
</tr>
<thead>
<tr>
<th>0,1</th><th>1,1</th><th>2,1</th>
</tr>
</thead>
</table>
It's invalid HTML and you can double check that with the w3C markup validation service though before you do you'll have to add a <!DOCTYPE> declaration and the rest of a valid HTML doc.