In Pandas and Seaborn we can create beautiful graphical displays. However sometimes the best thing to show are numbers, for example in a data frame or pivot table.
Are there tools available to generate a similarly attractive display of numbers? (Yes, I suppose I can export to word or excel but that would have been true for beautiful graphs too...)
I'd say it depends on your definition of attractive, but one can make simple clean looking tables from pandas using the pandas.DataFrame.to_html() function. Combine this with custom CSS, or Bootstrap CSS as below, and the results are decent.
import pandas as pd
sample_df = pd.DataFrame({'Column A': [1,2,3,4,5], 'Column B': [5,4,3,2,1], 'Column C': [100,200,300,400,500]})
with open('test_table.html', 'w') as f:
f.write(sample_df.to_html())
Then simply edit the output html with some CSS, in this case Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col">
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<td>1</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<th>1</th>
<td>2</td>
<td>4</td>
<td>200</td>
</tr>
<tr>
<th>2</th>
<td>3</td>
<td>3</td>
<td>300</td>
</tr>
<tr>
<th>3</th>
<td>4</td>
<td>2</td>
<td>400</td>
</tr>
<tr>
<th>4</th>
<td>5</td>
<td>1</td>
<td>500</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Resulting in something simple looking like this:
Which could be saved to PDF etc.
Related
It's my first time to develop a website using OctoberCMS and I'm loving it so far. I want to integrate the Datatables like this but it doesn't work for some reason. The styling doesn't even apply to the table. I was trying my luck to find a tutorial but cannot find any over the internet. Thanks in advance!
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready( function () {
$('#table_id').DataTable();
} );
</script>
Good evening, everyone,
I have a vue-template which should generate a table. The table header, more precisely the number of individual column headers can be determined dynamically via the "slots".
Unfortunately there is always the error that there can only be one root element.
How can I - as easy as possible - make sure that my components are inserted into the header anyway.
table.vue
<template>
<table>
<thead>
<tr>
<slot></slot>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
</template>
And this ist how i would like to use it:
<lbtable>
<th>Column 1</th>
<th>Column 2</th>
</lbtable>
Here the error-message: Cannot use slot as component root element because it may contain multiple nodes.
Edit:
Here you can find the example:
https://codesandbox.io/s/small-waterfall-k6fit
Try this! You just need to wrap <th> with <template> tag.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<lbtable>
<template>
<th>Column 1</th>
<th>Column 2</th>
</template>
</lbtable>
</div>
</body>
</html>
<script>
Vue.component('lbtable', {
'template': `
<div>
<table border="1">
<thead>
<tr>
<slot></slot>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>`});
new Vue({
el: "#app"
});
</script>
I want to put a string on HTML content.I have the next code
<table>
<tr>
<td>hi</td>
</tr>
<tr class="pem">
<td>hello</td>
</tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>hi</td>
</tr>
<tr class="pem">
<td>hello</td>
</tr>
<td>1</td>
<td>2</td>
</tr>
</table>
So if you see, I need to put 2 "tr" to close it.
I think i need to make a for like this:
for each node as htmlNode in doc.DocumentNode.SelectNodes("//tr[contains(#class,'pem')]")
//And here i want to make a appendchild to put only the "tr" to open it
node.appendChild("<tr>")
But it doesn't work because I need to make an HTML node or htmlElement
You need to use CDATA tags in order to insert html elements in xml.
An example would be:
<xml>
<title>Your HTML title</title>
<htmlData><![CDATA[<html>
<head>
<script/>
</head>
<body>
Your HTML's body
</body>
</html>
]]>
</htmlData>
</xml>
I'm using the Selenium IDE to store the values of a table in a page in some variables and then type the text in those variables in a text box, one per line.
The problem is that when I loop through the variable ${card} the contents of the variable replace themselves while they should be one at a line.
I would also like to know if I'm using the right tool for doing this. Should I be using the Selenium Webdriver or something else?
Here is the code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="https://es.magiccardmarket.eu/" />
<title>test</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">test</td></tr>
</thead><tbody>
<tr>
<td>open</td>
<td>https://eu.magiccardmarket.eu/?mainPage=browseUserProducts&idCategory=1&idUser=13786</td>
<td></td>
</tr>
<tr>
<td>store</td>
<td>1</td>
<td>x</td>
</tr>
<tr>
<td>label</td>
<td>target1</td>
<td></td>
</tr>
<tr>
<td>storeTable</td>
<td>//div[#id='siteContents']/div[2]/div[2]/div/form/table.${x}.2</td>
<td>card${x}</td>
</tr>
<tr>
<td>storeEval</td>
<td>new Number(${x}) + 1</td>
<td>x</td>
</tr>
<tr>
<td>gotoIf</td>
<td>storedVars['x'] < 31</td>
<td>target1</td>
</tr>
<tr>
<td>open</td>
<td>http://www.quackit.com/html/codes/html_text_box_code.cfm</td>
<td></td>
</tr>
<tr>
<td>store</td>
<td>1</td>
<td>x</td>
</tr>
<tr>
<td>label</td>
<td>target2</td>
<td></td>
</tr>
<tr>
<td>storeEval</td>
<td>storedVars['card' + storedVars['x']]</td>
<td>card</td>
</tr>
<tr>
<td>type</td>
<td>name=comments</td>
<td>${card}<br /></td>
</tr>
<tr>
<td>storeEval</td>
<td>new Number(${x}) + 1</td>
<td>x</td>
</tr>
<tr>
<td>gotoIf</td>
<td>storedVars['x'] < 31</td>
<td>target2</td>
</tr>
</tbody></table>
</body>
</html>
Type sets the value of an input field. So each time you call type it's only setting it to the 3rd column.
Something like this:
<tr>
<td>storeValue</td>
<td>name=comments</td>
<td>com</td>
</tr>
<tr>
<td>type</td>
<td>name=comments</td>
<td>${com}\n${newvalue}</td>
</tr>
Or you can build up the var and use the type command once.
Frankly I would do this looping in javascript rather than use flow control, which I don't like.
Need a help in loading up flexigrid for a HTML Table. I have the below piece of code and could not get flexigrid loaded when open up this html file in browsers(Tried IE, firefox, chrome). Please help in getting this work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Phone Directory</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid.css" />
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript" src="js/flexigrid.js"></script>
<script type="text/javascript">
$('.flexme').flexigrid();
</script>
</head>
<body>
<table id="flexme">
<thead>
<tr>
<th width="100">Col 1</th>
<th width="100">Col 2</th>
<th width="100">Col 3 is a long header name</th>
<th width="300">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
</tbody>
</table>
</body>
</html>
The document ready function is missing.
Replace the line $('.flexme').flexigrid(); with
$(document).ready(function(){
$('#flexme').flexigrid();
});