Please help me, on How to Print HTML Table with Multiple Table Header?
Sample code of my table header below:
<table>
<thead>
<tr>
<th colspan="6">January 2018</th>
</tr>
<tr>
<th colspan="2">TARGET</th>
<th colspan="2">ORDERED</th>
<th colspan="2">SALES</th>
</tr>
<tr>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
<th>QTY</th> <th>AMOUNT</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
This is what i want to see in printable page for the Table Header:
<table border="2" >
<thead>
<tr>
<th colspan="2"></th>
<th colspan="6" ></th>
<th colspan="6">January 2018</th>
</tr>
<tr>
<th colspan="2"></th>
<th colspan="6"></th>
<th colspan="2">TARGET</th>
<th colspan="2">ORDERED</th>
<th colspan="2">SALES</th>
</tr>
<tr>
<th colspan="2">item</th>
<th colspan="6">Description</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
</tr>
</thead>
<tbody>
</tbody>
See below code..
<table border="2" >
<thead>
<tr>
<th colspan="6" ></th>
<th colspan="6">January 2018</th>
</tr>
<tr>
<th colspan="6"></th>
<th colspan="2">TARGET</th>
<th colspan="2">ORDERED</th>
<th colspan="2">SALES</th>
</tr>
<tr>
</tr>
<tr>
<th colspan="2">item</th>
<th colspan="4">Description</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
<th colspan="1">QTY</th> <th colspan="1">AMOUNT</th>
</tr>
</thead>
<tbody>
</tbody>
here is working example :: https://jsfiddle.net/deepakvaishnav/0L48mvcz/
Related
I want to extend the "Water Body Classification" column until to the top of the "D" column, can't figure out how to do it...
Here's the table code
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Parameter</th>
<th scope="col">Unit</th>
<th scope="col" width="30px">Water Body Classification</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<th class="text-center" scope="col">AA</th>
<th class="text-center" scope="col">A</th>
<th class="text-center" scope="col">B</th>
<th class="text-center" scope="col">C</th>
<th class="text-center" scope="col">D</th>
</tr>
<tr>
<td>pH (Range)</td>
<td>mg/L</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-9.0</td>
<td class="text-center">6.5-9.0</td>
</tr>
</tbody>
</table>
You can use colspan in your CSS code. Like this:
colspan = "10"
The code below should show the result you want:
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Parameter</th>
<th scope="col">Unit</th>
<th scope="col" width="30px" colspan="5">Water Body Classification</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<th class="text-center" scope="col">AA</th>
<th class="text-center" scope="col">A</th>
<th class="text-center" scope="col">B</th>
<th class="text-center" scope="col">C</th>
<th class="text-center" scope="col">D</th>
</tr>
<tr>
<td>pH (Range)</td>
<td>mg/L</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-8.5</td>
<td class="text-center">6.5-9.0</td>
<td class="text-center">6.5-9.0</td>
</tr>
</tbody>
</table>
If you want to use the <table> tag. check the colspan and rowspan method
https://www.w3schools.com/html/html_table_colspan_rowspan.asp
And also you can use div as well
<th scope="col" width="30px" colspan='6'>Water Body Classification</th>
Change your th like this
I stumbled around this table ⤵️
Problem Description
Can someone tell me how do I get
"/" And "Time" below the Days Row?
Here is code:
<table border="2">
<tr>
<th rowspan="3">Days
</th>
<th rowspan="3">Monday</th>
<th rowspan="3">Tuesday</th>
<th rowspan="3">Wednesday</th>
<th rowspan="3">Thursday</th>
<th rowspan="3">Friday</th>
<th rowspan="3">Saturday</th>
</tr>
<tr>
<th>/</th>
</tr>
<tr>
<th>Time</th>
</tr>
</table>
You need to remove the rowspan from the "Days" column (or set it to 1):
<table border="2">
<tr>
<th>Days</th>
<th rowspan="3">Monday</th>
<th rowspan="3">Tuesday</th>
<th rowspan="3">Wednesday</th>
<th rowspan="3">Thursday</th>
<th rowspan="3">Friday</th>
<th rowspan="3">Saturday</th>
</tr>
<tr>
<th>/</th>
</tr>
<tr>
<th>Time</th>
</tr>
</table>
I'm trying to replicate this table:
I have trouble with the third table head, I don't know how to make that double row and those 5 columns and how to do the table rows and table data to make it fit the head.
I never used colgroup and rowspan before, I tried to mix some examples I've found but i'm not having success.
This is what I have so far:
<table border="1">
<caption>
Poster availability
</caption>
<col>
<colgroup span="5"></colgroup>
<col>
<thead>
<tr>
<th scope="col">Poster name</th>
<td rowspan="2"></td>
<th scope="colrow" colspan="5">Color</th>
<th scope="col">Sizes available</th>
</tr>
<tr>
<th>1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th>7</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col">7</th>
</tr>
</tbody>
This is the way I solved it, just in case other newbie like me has the same problem
<table border="1">
<col>
<col>
<colgroup span="5"></colgroup>
<col>
<tr>
<td rowspan="2">EVIDENCIA DE APRENDIZAJE</td>
<th rowspan="2">%</th>
<th colspan="5" scope="colgroup">INDICADOR DE ALCANCE</th>
<th rowspan="2">INSTRUMENTOS DE EVALUACIÓN</th>
</tr>
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
<th scope="col">E</th>
</tr>
<tr>
<td>EVIDENCIA 1</td>
<td>50%</td>
<td>A1</td>
<td>B2</tds>
<td>C3</td>
<td>D4</td>
<TD>E1</TD>
<td>Instrumento 1</td>
</tr>
</table>
I created a service that will return a set of HTML tables based on a request parameter. Currently, I return the data (HTML Page) back as a string. A sample output is below:
<!DOCTYPE html>
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>Person</h1>
<table name="name">
<thead>
<tr>
<th data-field="propertyID"> Property ID</th>
<th data-field="property"> Property</th>
<th data-field="valueID"> Value ID</th>
<th data-field="value"> Value</th>
</tr>
</thead>
<tr>
<td>http://topbraid.org/examples/kennedys#name</td>
<td>Name</td>
<td>Alfred Tucker</td>
<td>Alfred Tucker</td>
</tr>
</table>
<table name="firstName">
<thead>
<tr>
<th data-field="propertyID"> Property ID</th>
<th data-field="property"> Property</th>
<th data-field="valueID"> Value ID</th>
<th data-field="value"> Value</th>
</tr>
</thead>
<tr>
<td>http://topbraid.org/examples/kennedys#firstName</td>
<td>First Name</td>
<td>Alfred</td>
<td>Alfred</td>
</tr>
</table>
<table name="lastName">
<thead>
<tr>
<th data-field="propertyID"> Property ID</th>
<th data-field="property"> Property</th>
<th data-field="valueID"> Value ID</th>
<th data-field="value"> Value</th>
</tr>
</thead>
<tr>
<td>http://topbraid.org/examples/kennedys#lastName</td>
<td>Last Name</td>
<td>Tucker</td>
<td>Tucker</td>
</tr>
</table>
<table name="gender">
<thead>
<tr>
<th data-field="propertyID"> Property ID</th>
<th data-field="property"> Property</th>
<th data-field="valueID"> Value ID</th>
<th data-field="value"> Value</th>
</tr>
</thead>
<tr>
<td>http://topbraid.org/examples/kennedys#gender</td>
<td>Gender</td>
<td>http://topbraid.org/examples/kennedys#male</td>
<td>male</td>
</tr>
</table>
<table name="birthYear">
<thead>
<tr>
<th data-field="propertyID"> Property ID</th>
<th data-field="property"> Property</th>
<th data-field="valueID"> Value ID</th>
<th data-field="value"> Value</th>
</tr>
</thead>
<tr>
<td>http://topbraid.org/examples/kennedys#birthYear</td>
<td>Birth Year</td>
<td>1967</td>
<td>1967</td>
</tr>
</table>
<table name="spouse">
<thead>
<tr>
<th data-field="propertyID"> Property ID</th>
<th data-field="property"> Property</th>
<th data-field="valueID"> Value ID</th>
<th data-field="value"> Value</th>
</tr>
</thead>
<tr>
<td>http://topbraid.org/examples/kennedys#spouse</td>
<td>Spouce</td>
<td>http://topbraid.org/examples/kennedys#KymSmith</td>
<td>Kym Smith</td>
</tr>
</table>
<table name="type">
<thead>
<tr>
<th data-field="propertyID"> Property ID</th>
<th data-field="property"> Property</th>
<th data-field="valueID"> Value ID</th>
<th data-field="value"> Value</th>
</tr>
</thead>
<tr>
<td>http://www.w3.org/1999/02/22-rdf-syntax-ns#type</td>
<td>Type</td>
<td>http://topbraid.org/examples/kennedys#Person</td>
<td>Person</td>
</tr>
</table>
</body>
</html>
Now that I get the HTML string back, I would like to somehow bind each table to a Grid in the Kendo UI. How can this be done? If not, what would be the proper way to be doing this?
I'm not sure if this is exactly what you want, but you can just inject that HTML into your page (my example uses jQuery)
<div id="contentArea"></div>
$("#contentArea").html(serviceResult);
then turn all the tables into Kendo grids:
$("#contentArea table").kendoGrid({});
I have a table like this:
<table border="1">
<thead>
<tr>
<th colspan="2">Items</th>
<th colspan="2">Type</th>
<th colspan="4">Values</th>
<th colspan="2">Date</th>
</tr>
<tr>
<th colspan="2"></th>
<th colspan="2"></th>
<th colspan="2">Before</th>
<th colspan="2">After</th>
<th colspan="2"></th>
</tr>
</thead>
<tbody></tbody>
In the header of the table, I would like to have the headers Items, Type and Date to be centered vertically. I tried using rowspan="2" on these headers, but that didn't work. Any idea please?
When using rowspan, you have to not add the columns in the next rows (or as much rows as the rowspan number minus one).
Your demo, updated:
<table border="1">
<thead>
<tr>
<th rowspan="2">Items</th>
<th rowspan="2">Type</th>
<th colspan="4">Values</th>
<th rowspan="2">Date</th>
</tr>
<tr>
<th colspan="2">Before</th>
<th colspan="2">After</th>
</tr>
</thead>
<tbody></tbody>
</table>
Note: If you remove the Before and After colspan, your Values colspan can be just 2.
<table border="1">
<thead>
<tr>
<th colspan="2" rowspan="2">Items</th>
<th colspan="2" rowspan="2">Type</th>
<th colspan="4">Values</th>
<th colspan="2" rowspan="2">Date</th>
</tr>
<tr>
<th colspan="2">Before</th>
<th colspan="2">After</th>
</tr>
</thead>
<tbody></tbody>
<table border="1">
<thead>
<tr>
<th rowspan="2">Items</th>
<th rowspan="2">Type</th>
<th colspan="2">Values</th>
<th rowspan="2">Date</th>
</tr>
<tr>
<th>Before</th>
<th>After</th>
</tr>
</thead>
<tbody></tbody>