Grouping table data into columns rather then rows - css

Most of the time it makes sense to organize table data in rows. However right now I'm dealing with a table that compares data across several columns. Each column is a product, so I'd like to keep all product data grouped together.
<tr>
<td>Name</td>
<td>Price</td>
<td>Weight</td>
<td>Height</td>
<td>Compatibility</td>
<td>Designer</td>
<td>Manufacturer</td>
<td>Age Requirement</td>
</tr>
Using the TR tag that row will run horizontally, is there a way to make it run vertically?
Update:
I would like the table to display like regular html in this example:
<tr>
<td>Name</td>
<td>Name2</td>
</tr>
<tr>
<td>Price</td>
<td>Price2</td>
</tr>
<tr>
<td>Weight</td>
<td>Weight2</td>
</tr>
<tr>
<td>Height</td>
<td>Height2</td>
</tr>
However I would like to be able to code it by related content:
<tr>
<td>Name</td>
<td>Price</td>
<td>Weight</td>
<td>Height</td>
</tr>
<tr>
<td>Name</td>
<td>Price</td>
<td>Weight</td>
<td>Height</td>
</tr>
In other words, I want the table row tag (tr) to act like a column.


<tr>
<td>Name</td>
</tr>
<tr>
<td>Price</td>
</tr>
<tr>
<td>Weight</td>
</tr>
<tr>
<td>Height</td>
</tr>
<tr>
<td>Compatibility</td>
</tr>
<tr>
<td>Designer</td>
</tr>
<tr>
<td>Manufacturer</td>
</tr>
<tr>
<td>Age Requirement</td>
</tr>
If you want another product beside it, you would do:
<tr>
<td>Name</td>
<td>Name2</td>
</tr>
<tr>
<td>Price</td>
<td>Price2</td>
</tr>
<tr>
<td>Weight</td>
<td>Weight2</td>
</tr>
<tr>
<td>Height</td>
<td>Height2</td>
</tr>
<tr>
<td>Compatibility</td>
<td>Compatibility2</td>
</tr>
<tr>
<td>Designer</td>
<td>Designer2</td>
</tr>
<tr>
<td>Manufacturer</td>
<td>Manufacturer2</td>
</tr>
<tr>
<td>Age Requirement</td>
<td>Age Requirement2</td>
</tr>


This solution may not work on older browsers, but something along the lines of this approach generally works for me:
<style>
.col {
display: table-cell;
}
</style>
<body>
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</body>

Related

How to create custom table with different cells?

It should be like
It should be 4 rows and 3 colums. In first column centrall cell takes 2 cells. In second it should be 1 row. And third the same as first
I have this code
<table border="1" width="100%">
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="4">2</td>
<td>3</td>
</tr>
<tr>
<td rowspawn="2">4</td>
<td rowspawn="2">5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
But it looks like this

I am not 100% sure what you are after however, does this give you what you want?
<table border="1" width="100%">
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="4">2</td>
<td>3</td>
</tr>
<tr>
<td style="height:200px;" rowspawn="2">4</td>
<td rowspawn="2">5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>

<table height="200px" width="900px" border="1px solid black">
<tr>
<td></td>
<td rowspan="4"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Try this code. It Works.

How to Position Anchors in HTML Tables in the Viewport

I am using anchor elemnts in an html table and want to add some padding to the top of the viewport. I figured out, that I can place the anchor in a dummy DIV element inside of the TD element to achieve this. However I also want to highlight the targets table row.
How can I achieve this without javascript?
I have tried several solutions from
HTML position:fixed page header and in-page anchors,
but they all do not work well in html tables.
Here is some minimal working example.
The "D" anchor has correct highlighting, but positioning does not
work.
The "E" anchor has correct positioning, but no highlighting.
tr:target {
color: #ee4444;
position: relative;
top: -40px;
}
div:target {
color: #ee4444;
position: relative;
top: -40px;
}
go to D go to E
<table>
<tr>
<th>Symbol</th>
<th>1932 ITU/ICAN Phonetic</th>
</tr>
<tr>
<td>A</td>
<td>Amsterdam</td>
</tr>
<tr>
<td>B</td>
<td>Baltimore</td>
</tr>
<tr>
<td>C</td>
<td>Casablanca</td>
</tr>
<tr id="D">
<td>D</td>
<td>Denmark</td>
</tr>
<tr>
<td>
<div id="E"></div>E</td>
<td>Edison</td>
</tr>
<tr>
<td>F</td>
<td>Florida</td>
</tr>
<tr>
<td>G</td>
<td>Gallipoli</td>
</tr>
<tr>
<td>H</td>
<td>Havana</td>
</tr>
<tr>
<td>I</td>
<td>Italia</td>
</tr>
<tr>
<td>J</td>
<td>Jerusalem</td>
</tr>
<tr>
<td>K</td>
<td>Kilogramme</td>
</tr>
<tr>
<td>L</td>
<td>Liverpool</td>
</tr>
<tr>
<td>M</td>
<td>Madagascar</td>
</tr>
<tr>
<td>N</td>
<td>New York</td>
</tr>
<tr>
<td>O</td>
<td>Oslo</td>
</tr>
<tr>
<td>P</td>
<td>Paris</td>
</tr>
<tr>
<td>Q</td>
<td>Quebec</td>
</tr>
<tr>
<td>R</td>
<td>Roma</td>
</tr>
<tr>
<td>S</td>
<td>Santiago</td>
</tr>
<tr>
<td>T</td>
<td>Tripoli</td>
</tr>
<tr>
<td>U</td>
<td>Upsala</td>
</tr>
<tr>
<td>V</td>
<td>Valencia</td>
</tr>
<tr>
<td>W</td>
<td>Washington</td>
</tr>
<tr>
<td>X</td>
<td>Xanthippe</td>
</tr>
<tr>
<td>Y</td>
<td>Yokohama</td>
</tr>
<tr>
<td>Z</td>
<td>Zurich</td>
</tr>
</table>

The intended behaviour can be achieved if you consider combining both the initial solutions attempted into one standard, as demonstrated by the code snippet embedded below.
Create separate table-rows for your anchor points, assign your
respective ids to these elements.
Use the adjacent sibling combinator Ref (+) to
declare your pseudo-selector :target styles
Declare your anchor point table-row with absolute positioning and
use margin-top property values to offset the position instead of
the top property (as this will position the element n question
relative to the document or the closest containing/parent element with a relative positioning)
Code Snippet Demonstration:
table {
border-spacing: 0;
}
.anchor-row:target + tr {
color: #ee4444;
}
.anchor-row {
position: absolute;
margin-top: -40px;
}
go to D go to E
<table>
<tr>
<th>Symbol</th>
<th>1932 ITU/ICAN Phonetic</th>
</tr>
<tr>
<td>A</td>
<td>Amsterdam</td>
</tr>
<tr>
<td>B</td>
<td>Baltimore</td>
</tr>
<tr>
<td>C</td>
<td>Casablanca</td>
</tr>
<tr class="anchor-row" id="D">
<td colspan="2"></td>
</tr>
<tr>
<td>D</td>
<td>Denmark</td>
</tr>
<tr class="anchor-row" id="E">
<td colspan="2"></td>
</tr>
<tr>
<td>E</td>
<td>Edison</td>
</tr>
<tr>
<td>F</td>
<td>Florida</td>
</tr>
<tr>
<td>G</td>
<td>Gallipoli</td>
</tr>
<tr>
<td>H</td>
<td>Havana</td>
</tr>
<tr>
<td>I</td>
<td>Italia</td>
</tr>
<tr>
<td>J</td>
<td>Jerusalem</td>
</tr>
<tr>
<td>K</td>
<td>Kilogramme</td>
</tr>
<tr>
<td>L</td>
<td>Liverpool</td>
</tr>
<tr>
<td>M</td>
<td>Madagascar</td>
</tr>
<tr>
<td>N</td>
<td>New York</td>
</tr>
<tr>
<td>O</td>
<td>Oslo</td>
</tr>
<tr>
<td>P</td>
<td>Paris</td>
</tr>
<tr>
<td>Q</td>
<td>Quebec</td>
</tr>
<tr>
<td>R</td>
<td>Roma</td>
</tr>
<tr>
<td>S</td>
<td>Santiago</td>
</tr>
<tr>
<td>T</td>
<td>Tripoli</td>
</tr>
<tr>
<td>U</td>
<td>Upsala</td>
</tr>
<tr>
<td>V</td>
<td>Valencia</td>
</tr>
<tr>
<td>W</td>
<td>Washington</td>
</tr>
<tr>
<td>X</td>
<td>Xanthippe</td>
</tr>
<tr>
<td>Y</td>
<td>Yokohama</td>
</tr>
<tr>
<td>Z</td>
<td>Zurich</td>
</tr>
</table>

You can try below this.
tr:target {
color: #ee4444;
position:relative;
top:0px;
}
span:target {
color: #ee4444;
position:relative;
top:0px;
}
<tr id="D"><td>D</td><td>Denmark</td></tr>
<tr><td><span id="E">hello</span>E</td><td>Edison</td></tr>

How to make TD tag occupy entire space?

I'm trying to make a single row with one single column occupy entire space of a row, and no a single column space:
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
</tr>
</thead>
<tbody>
<tr>
<td>L1</td>
<td>L2</td>
<td>L3</td>
<td>L4</td>
</tr>
<tr>
<td>ONE LINE</td> #THIS ONE I WANT TO OCCUPY SPACE OF 4 TDs
</tr>
</tbody>
</table>
I already tried it:
<td style="width:100%">ONE LINE</td>
and
<tr style="width:100%">
<td>ONE LINE</td>
</tr>

You can use the colspan attribute
<table>
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
</tr>
</thead>
<tbody>
<tr>
<td>L1</td>
<td>L2</td>
<td>L3</td>
<td>L4</td>
</tr>
<tr>
<td colspan="4">ONE LINE</td>
</tr>
</tbody>
</table>

How to select the last rowspan in a table?

I have a table with some <td>s, and a couple of them have rowspan attribute. I'm trying to select the very last one in the table, neither last-child nor last-of-type works.
Here is a jsfiddle: https://jsfiddle.net/p2cjwvj5/
<table class='myTable' border='1'>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td rowspan='3'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</table>
.myTable [rowspan]:last-of-type {
color: red;
}
I'm trying to to select the cell that contains "HEADER2".
Is this possible? I know I can work around it by tagging the last rowspan with another class, just wonder if there is a cleaner method. Thanks!

You can wrap each group of <tr>s into a <tbody>, then select the last tbody by either using :last-of-type or :last-child would be fine.
.myTable tbody:last-of-type td[rowspan] {
color: red;
}
<table class='myTable' border='1'>
<tbody>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan='3'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</tbody>
</table>

If you don't want to add more <tbody>s, you could always just put a class on the last rowspan-ed table cell, like:
.myTable .lastRowspannedCell {
color: red;
}
<table class='myTable' border='1'>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td rowspan='3' class='lastRowspannedCell'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</table>
I don't know the structure of your back-end code, so that's assuming you can know up-front if a group is the last group.
As a bonus, not using the :last-of-type/:last-child selector nets you better IE8 compatibility, if you care about that.

Currency table in CSS

I have a table and I need to format the currency in order for the . to be displayed always under each other.
This is the table:
<table class="data" cellspacing="0" cellpadding="5" border="0">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Field1</th>
<th>Field2</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr class="verticalDivider"></tr>
<tr>
<td>08 April 2010</td>
<td>value 1</td>
<td>GBP 20.00</td>
<td> </td>
<td>GBP 20.00</td>
</tr>
<tr>
<td>08 May 2010</td>
<td>value 2</td>
<td>GBP 100.00</td>
<td> </td>
<td>GBP 1020.00</td>
</tr>
<tr>
<td>19 May 2010</td>
<td>value 3</td>
<td> </td>
<td>GBP 50.00</td>
<td>GBP 970.00</td>
</tr>
</tbody>
</table>
How can I achieve this?

How does this look?
<style type="text/css">
.price {
text-align: right;
}
</style>
<table class="data" cellspacing="0" cellpadding="5" border="0">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Field1</th>
<th>Field2</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr class="verticalDivider"></tr>
<tr>
<td>08 April 2010</td>
<td>value 1</td>
<td class="price">GBP 20.00</td>
<td> </td>
<td class="price">GBP 20.00</td>
</tr>
<tr>
<td>08 May 2010</td>
<td>value 2</td>
<td class="price">GBP 100.00</td>
<td> </td>
<td class="price">GBP 1020.00</td>
</tr>
<tr>
<td>19 May 2010</td>
<td>value 3</td>
<td> </td>
<td class="price">GBP 50.00</td>
<td class="price">GBP 970.00</td>
</tr>
</tbody>
</table>

assuming you'll always print 2 decimal digits, I would define all my table <col /> then I'd assign text-align : right to that cols that contain prices (and padding-right to create space from border)
otherwise as specified in http://www.w3.org/TR/html401/struct/tables.html#h-11.3.2 you could assign align="char" char="." to table cols (if you browser support it)

To have the currency symbol (GBP) AND the dots aligned you can do the following (tested on Chrome and Firefox, breaks on IE):
CSS file:
...
td.money {
text-align: right;
}
.currencySymbol {
float: left;
}
...
And your table cell would look like:
<td class="money">
<div class="currencySymbol">GBP</div>
970.00
</td>
Although it's dangerous (probably the reason why it breaks on IE), see: Is a DIV inside a TD a bad idea?

<td align="right">GBP 20.00</td>
<td align="right">GBP 100.00</td>
<td align="right"> </td>
I Guess thats what you are looking for as long as thee is ".00". If I were you, I would start using css even for this bit of code where you need to edit 3 places instead of one.

Resources