How to create a nested four column table layout?
You've got several syntax errors in there, beyond that just missing a rowspan on a cell and you had more columns in your html than your example shows. See updated example below. Also not sure if all the separate tbody tags serve some sort of purpose but left them in there for ya since technically it's still valid markup. Cheers.
table {
border-collapse: collapse;
}
td, th {
border: #0f0 1px solid;
padding: .2rem;
}<table>
<thead>
<tr colspan="5">
<th>Regian</th>
<th>Q1 2010</th>
<th>Q2 2010</th>
<th>Q3 2010</th>
<th>Q4 2010</th>
</tr>
</thead>
<tbody className="labels">
<tr>
<td colSpan="5">
<label htmlFor="accounting">Accounting</label>
<input
type="checkbox"
name="accounting"
id="accounting"
data-toggle="toggle"
/>
</td>
</tr>
</tbody>
<tbody className="hide" id="accounting-data">
<tr>
<td rowspan="2" style="vertical-align: top">Date</td>
<td>Australia</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Central America</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
</tr>
</tbody>
</table>how to create an html table with specific rows and columns
There were some errors in your html related to closing </td> tags. This should work:
<html>
<head>
<style>
table,
td,
th {
border: 2px solid gray;
text-align: center
}
</style>
</head>
<body>
<table width="30%">
<tr>
<td colspan="5">1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="6">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="4">6</td>
<td colspan="2">7</td>
<td colspan="2">8</td>
</tr>
<tr>
<td colspan="2">9</td>
<td colspan="2">10</td>
<td colspan="2">11</td>
<td colspan="2">12</td>
</tr>
</table>
</body>
</html>
Demo: https://jsfiddle.net/js2ye3uo/
Convert column-oriented data to row-oriented HTML
I. XSLT 1.0 solution
This transformation:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:ext="http://exslt.org/common" exclude-result-prefixes="ext">
<xsl:output omit-xml-declaration="yes" indent="yes"/>
<xsl:strip-space elements="*"/>
<xsl:variable name="vrtfPass1">
<xsl:apply-templates mode="pass1"/>
</xsl:variable>
<xsl:variable name="vPass1"
select="ext:node-set($vrtfPass1)"/>
<xsl:variable name="vMaxRow">
<xsl:for-each select=
"$vPass1/*/*/cell/@startRow">
<xsl:sort select="." data-type="number" order="descending"/>
<xsl:if test="position() = 1">
<xsl:value-of select="."/>
</xsl:if>
</xsl:for-each>
</xsl:variable>
<xsl:template match="node()|@*" mode="pass1">
<xsl:copy>
<xsl:apply-templates select="node()|@*" mode="pass1"/>
</xsl:copy>
</xsl:template>
<xsl:template match="cell" mode="pass1">
<cell height="{@height}"
startRow="{sum(preceding-sibling::*/@height) +1}">
<xsl:copy-of select="text()"/>
</cell>
</xsl:template>
<xsl:template match="/">
<table>
<xsl:call-template name="makeRows">
<xsl:with-param name="pmaxRow" select="$vMaxRow"/>
</xsl:call-template>
</table>
</xsl:template>
<xsl:template name="makeRows">
<xsl:param name="prowNum" select="1"/>
<xsl:param name="pmaxRow" select="1"/>
<xsl:if test="not($prowNum > $pmaxRow)">
<tr>
<xsl:apply-templates select=
"$vPass1/*/*/cell[@startRow = $prowNum]"/>
</tr>
<xsl:call-template name="makeRows">
<xsl:with-param name="prowNum" select="$prowNum+1"/>
<xsl:with-param name="pmaxRow" select="$pmaxRow"/>
</xsl:call-template>
</xsl:if>
</xsl:template>
<xsl:template match="cell">
<td rowspan="{@height}"><xsl:value-of select="."/></td>
</xsl:template>
</xsl:stylesheet>
when applied on the provided XML document:
<source>
<column>
<cell height="1">col A row 1</cell>
<cell height="2">col A rows 2-3</cell>
</column>
<column>
<cell height="2">col B row 1-2</cell>
<cell height="1">col B row 3</cell>
</column>
<column>
<cell height="3">col C rows 1-3</cell>
</column>
</source>
produces the wanted, correct result:
<table>
<tr>
<td rowspan="1">col A row 1</td>
<td rowspan="2">col B row 1-2</td>
<td rowspan="3">col C rows 1-3</td>
</tr>
<tr>
<td rowspan="2">col A rows 2-3</td>
</tr>
<tr>
<td rowspan="1">col B row 3</td>
</tr>
</table>
II. XSLT 2.0 solution:
This is similar to the XSLT 1.0 solution, but we use the max() function and also avoid the recursion by usig the to operator.
<xsl:stylesheet version="2.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
exclude-result-prefixes="xs">
<xsl:output omit-xml-declaration="yes" indent="yes"/>
<xsl:strip-space elements="*"/>
<xsl:variable name="vPass1">
<xsl:apply-templates mode="pass1"/>
</xsl:variable>
<xsl:variable name="vMaxRow" as="xs:integer"
select="max($vPass1/*/*/cell/@startRow/xs:integer(.))"/>
<xsl:template match="node()|@*" mode="pass1">
<xsl:copy>
<xsl:apply-templates select="node()|@*" mode="pass1"/>
</xsl:copy>
</xsl:template>
<xsl:template match="cell" mode="pass1">
<cell height="{@height}"
startRow="{sum(preceding-sibling::*/@height) +1}">
<xsl:copy-of select="text()"/>
</cell>
</xsl:template>
<xsl:template match="/">
<table>
<xsl:for-each select="1 to $vMaxRow">
<tr>
<xsl:apply-templates select=
"$vPass1/*/*/cell[@startRow = current()]"/>
</tr>
</xsl:for-each>
</table>
</xsl:template>
<xsl:template match="cell">
<td rowspan="{@height}"><xsl:value-of select="."/></td>
</xsl:template>
</xsl:stylesheet>
How can I make a HTML table with headers in one vertical column?
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).
Responsive table by columns
Table have a problem with responsivity, because table datas are written by lines, so data in code looks thus: A, B, C, D, A, B, C, D... not A, A, A, A, B, B, B, B...
So you not get output with datas in the right order.
If you use media query, output looks thus:
@media all and (max-width:500px){
table{
width:100%;
}
td{
display:block;
width:100%;
}
tr{
display:block;
margin-bottom:30px;
}
}
http://jsfiddle.net/sjdjrm8m/
You need convert your table to this enrollment:
HTML:
<table>
<tr>
<td colspan="2">Some title</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td style="text-align: center; background-color: #e8e8e8;"> <span style="color: #1e2a64;"><strong>Title</strong></span>
</td>
</tr>
<tr>
<td style="text-align: center; background-color: #efedee;">
<div class="circle"><strong>40.000</strong> <sup>eur</sup>
<br>month</div>
</td>
</tr>
<tr>
<td style="text-align: center; background-color: #f5f5f5;"> <strong>Text</strong>
<p></p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
</td>
</tr>
<tr style="height: 70px;">
<td style="text-align: center; background-color: #f5f5f5; vertical-align: middle;">
<input id="kontakt_btn" type="button" value="contact">
</td>
</tr>
</tbody>
</table>
</td><td>
<table>
<tr>
<td style="text-align: center; background-color: #dedcdd;"><strong> <span style="color: #1e2a64;">Title2</span></strong>
</td>
</tr>
<tr>
<td style="text-align: center; background-color: #efedee;">
<div class="circle"><strong>40.000</strong> <sup>eur</sup>
<br>month</div>
</td>
</tr>
<tr>
<td style="text-align: center; background-color: #f5f5f5;"> <strong>Text</strong>
<p></p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
<p><span style="color: #555555;">Lorem Ipsum</span>
</p>
</td>
</tr>
<tr style="height: 70px;">
<td style="text-align: center; background-color: #f5f5f5; vertical-align: middle;">
<input id="kontakt_btn" type="button" value="contact">
</td>
</tr>
</tbody>
</table>
CSS:
@media all and (max-width:500px){
table{
width:100%;
}
td{
display:block;
width:100%;
}
tr{
display:block;
margin-bottom:30px;
}
tr tr{
margin-bottom:0;
}
}
http://jsfiddle.net/9yefftan/
Related Topics
Create Angular Material Theme with CSS Variables
Iframe Horizontal Scrolling Not Rendering on iOS
Getting the Right Font-Size on Every Mobile Device
Add a Rule Between CSS Grid Columns and Rows
Change Color of Svg Background-Image (Bootstrap 4 Carousel)
Why 'Float:Left' Doesn't Work with a Fixed Width
How to Create a Gradient Border on a Circle with CSS3
Override Angular Material CSS Differently in Different Components
Want to Override Child Element CSS Property by Parent Element
What Tag Should I Use Instead of Deprecated Tag Font in HTML (Cannot Use CSS)
Can an Abbr Tag's Title Be Styled
How to Make a Verticallayout Scrollable Using Vaadin
Safari: Vh Units Applied to Parent Element Doesn't Allow 100% Height in Child