I'm trying to create a simple bootstrap table from HTML and JSON input data. For some reason, however, the table header seems to form a separate table (?) with an additional first column. Why is it so?
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.18.1/dist/bootstrap-table.min.css">
</head>
<body>
<div class="col-lg-9">
<table data-toggle="table" id="fragmenterTable" data-search="true" data-show-refresh="true"
data-show-toggle="true" data-show-fullscreen="true" data-show-columns="true"
data-show-columns-toggle-all="true" data-detail-view="true" data-show-export="true"
data-click-to-select="true" data-show-pagination-switch="true" data-pagination="true"
data-page-list="[10, 25, 50, 100, all]" data-side-pagination="client">
<thead>
<th data-field="Molecule">
Molecule
</th>
<th data-field="Smiles">
Smiles
</th>
<th data-field="MolWeight">
MolWeight
</th>
<th data-field="HBA">
HBA
</th>
<th data-field="HBD">
HBD
</th>
<th data-field="TPSA">
TPSA
</th>
<th data-field="HeavyAtoms">
HeavyAtoms
</th>
<th data-field="Charge">
Charge
</th>
<th data-field="RingCount">
RingCount
</th>
<th data-field="AromaticRings">
AromaticRings
</th>
<th data-field="AliphaticRings">
AliphaticRings
</th>
<th data-field="RotatableBonds">
RotatableBonds
</th>
<th data-field="cLogP">
cLogP
</th>
<th data-field="MorganFingerprints">
MorganFingerprints
</th>
</thead>
</table>
</div>
</body>
<!-- Include jQuery and other required
files for Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.18.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.18.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script type="text/javascript">
var in_json = 'fragments_test.json'
$(document).ready(function () {
$('#fragmenterTable').append('<tbody>');
// FETCHING DATA FROM JSON FILE
$.getJSON(in_json,
function (data) {
$.each(data.data, function (key, value) {
var row = '';
row += '<tr>';
for (i = 0; i < value.length; i++) {
if (i == 0) {
row += '<td>' + 'mol2 content' + '</td>';
} else {
row += '<td>' + value[i] + '</td>';
}
}
row += '</tr>';
$('#fragmenterTable').append(row);
});
});
$('#fragmenterTable').append('</tbody>');
});
</script>
My json file looks as follows (fragments_test.json):
{"columns":["Molecule","Smiles","MolWeight","HBA","HBD","TPSA","HeavyAtoms","Charge","RingCount","AromaticRings","AliphaticRings","RotatableBonds","cLogP","MorganFingerprints"],"data":[["CHEMBL155926\n RDKit 2D\n\n 5 4 0 0 0 0 0 0 0 0999 V2000\n 12.7500 -12.1378 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 13.4649 -12.5497 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 14.1756 -12.1378 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 14.8903 -12.5497 0.0000 Cl 0 0 0 0 0 0 0 0 0 0 0 0\n 12.0352 -12.5497 0.0000 Cl 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 2 0\n 1 5 1 0\n 2 3 1 0\n 3 4 1 0\nM END\n","Cl\/C=C\/CCl",110.97,0,0,0.0,5,0,0,0,0,1,1.98,{}],["\n RDKit 2D\n\n 8 7 0 0 0 0 0 0 0 0999 V2000\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n 7.3288 -19.6010 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.0436 -19.1861 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.7585 -19.6010 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.0436 -18.3656 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n 9.4733 -19.1861 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 7.3288 -17.9508 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 0\n 3 2 1 0\n 4 3 1 0\n 3 5 2 0\n 6 4 1 0\n 4 7 2 0\n 5 8 1 0\nM ISO 2 1 8 6 1\nM END\n","[1*]C(=O)\/C(C[8*])=N\/O",85.06,3,1,49.66,6,0,0,0,0,2,0.04,{}],["\n RDKit 2D\n\n 9 8 0 0 0 0 0 0 0 0999 V2000\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n 16.4212 -8.5322 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 15.7020 -8.1276 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 16.4304 -9.3574 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 14.9893 -8.5402 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 15.2835 -7.4104 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 16.1087 -7.4104 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 14.2766 -8.1318 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 13.5639 -8.5444 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 0\n 2 3 1 0\n 2 4 2 0\n 5 3 1 0\n 3 6 1 0\n 3 7 1 0\n 8 5 1 0\n 9 8 1 0\nM ISO 1 1 1\nM END\n","[1*]C(=O)C(C)(C)CCC",113.18,1,0,17.07,8,0,0,0,0,3,2.01,{}],["\n RDKit 2D\n\n 6 5 0 0 0 0 0 0 0 0999 V2000\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n 9.1138 -22.8236 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 8.3488 -23.2242 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 9.8460 -23.2884 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 8.3117 -24.0895 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 7.6166 -22.7594 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 0\n 2 3 1 0\n 2 4 2 0\n 3 5 1 0\n 3 6 1 0\nM ISO 1 1 1\nM END\n","[1*]C(=O)C(C)C",71.1,1,0,17.07,5,0,0,0,0,1,0.84,{}],["\n RDKit 2D\n\n 8 7 0 0 0 0 0 0 0 0999 V2000\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n -0.0188 -0.1607 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.4313 0.5510 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.8062 -0.1607 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n -0.0188 1.2669 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.2563 0.5510 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.4313 1.9828 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.8062 1.2669 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 0\n 2 3 1 0\n 2 4 2 0\n 3 5 1 0\n 3 6 1 0\n 5 7 1 0\n 5 8 1 0\nM ISO 1 1 1\nM END\n","[1*]C(=O)C(C)C(C)O",101.12,2,1,37.3,7,0,0,0,0,2,0.2,{}],["\n RDKit 2D\n\n 7 6 0 0 0 0 0 0 0 0999 V2000\n 0.0000 0.0000 0.0000 R 0 0 0 0 0 0 0 0 0 0 0 0\n 24.9472 -17.9755 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 25.6590 -17.5645 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 24.9472 -18.8018 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 26.3752 -17.9755 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 25.6590 -16.7425 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 26.3759 -18.8369 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 1 0\n 2 3 1 0\n 2 4 2 0\n 3 5 1 0\n 3 6 1 0\n 5 7 1 0\nM ISO 1 1 1\nM END\n","[1*]C(=O)C(C)CC",85.13,1,0,17.07,6,0,0,0,0,2,1.23,{}]]}
Also, the pagination does not work, I assume it's because of the "detached" header.
Do you have any idea how to fix it?
Thank you!
You should format your json data structure to be like this:
https://examples.bootstrap-table.com/json/data1.json
where for each object will have its own fields:
[
{
"Molecule": "CHEMBL155926\n RDKit 2D\n\n 5 4 0 0 0 0 0 0 0 0999 V2000\n 12.7500 -12.1378 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 13.4649 -12.5497 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 14.1756 -12.1378 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 14.8903 -12.5497 0.0000 Cl 0 0 0 0 0 0 0 0 0 0 0 0\n 12.0352 -12.5497 0.0000 Cl 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 2 0\n 1 5 1 0\n 2 3 1 0\n 3 4 1 0\nM END\n",
"Smiles": "Cl/C=C/CCl",
"MolWeight": 110.97,
"HBA": 0,
"HBD": 0,
"TPSA": 0.0,
"HeavyAtoms": 5,
"Charge": 0,
"RingCount": 0,
"AromaticRings:": 0,
"AliphaticRings": 0,
"RotatableBonds": 1,
"cLogP": 1.98,
"MorganFingerprints": {}
}
]
After that, you can use the data-url instead of the function that "organizing" the json file as:
<table data-toggle="table" id="fragmenterTable" data-search="true" data-show-refresh="true"
data-show-toggle="true" data-show-fullscreen="true" data-show-columns="true"
data-show-columns-toggle-all="true" data-detail-view="true" data-show-export="true"
data-click-to-select="true" data-show-pagination-switch="true" data-pagination="true"
data-page-list="[10, 25, 50, 100, all]" data-side-pagination="client"
data-url="fragments_test.json">
Once you will provide bootstrap-table the correct formatted json file, it will work perfect.
I have a text file containing output of Octave cell array:
confusionMatrix5 =
{
[1,1] =
228 0 0 0 0 0 0 0
0 113 0 0 0 0 0 1
10 0 97 0 0 0 7 0
1 0 2 225 0 0 0 0
0 0 0 0 227 0 0 1
0 2 0 0 0 112 0 0
1 0 3 0 0 0 110 0
0 1 0 0 0 0 0 227
[2,1] =
228 0 0 0 0 0 0 0
0 113 0 0 0 0 0 1
8 0 99 0 0 0 7 0
2 0 1 225 0 0 0 0
0 0 0 0 227 0 0 1
0 1 0 0 0 113 0 0
0 0 4 0 0 0 110 0
0 1 0 0 0 0 0 227
...
}
I tried to simply copy the content of the file above and paste it but it throws bunch of errors, i.e.:
octave:105> [3,3] =
parse error:
invalid constant left hand side of assignment
Is there any way to easily load the cell array of such format back to the Octave cli?
Edit: I managed to handle the situation with few regexes and text replacing this time but remember to save your workspaces, folks!
So I've been having a gander at some snazzy websites seeing how they do things and how it's laid out for learning purposes and I encountered some code for the pathing that looks like the below example.
<path d="M5.47 7.2l-.55.33a5.14 5.14 0 0 1-3.2-1.28C1.48 6 1.2 5.88.94 5.7A2.39 2.39 0 0 1 0 4.4a7.29 7.29 0 0 1 1.61-1.21c.56-.4 1.13-.78 1.73-1.19l.54.18c.29-.74.29-.75 1-1.1A9.45 9.45 0 0 1 6.23.52 17.77 17.77 0 0 1 8 .14c.09 0 .19.06.29.08s.24.07.28 0A.78.78 0 0 1 9.24 0a5.47 5.47 0 0 1 1.66.09c.38.11.75.26 1.13.37s.35.29.44.56a.7.7 0 0 1 .8 0A8.54 8.54 0 0 1 16 3.54 14.5 14.5 0 0 0 17.11 5a2.55 2.55 0 0 1-1 .92c-.72.39-1.45.77-2.18 1.14s-.65.32-1.09-.24c-.45.09-.41.58-.72.85A13.77 13.77 0 0 1 6.7 8a1.15 1.15 0 0 1-1-.57c-.01-.1-.1-.14-.23-.23zm5.15-3.67c-.16-.35-.26-.62-.41-.87a1.12 1.12 0 0 0-1-.62 4.75 4.75 0 0 0-1.48.26 1.22 1.22 0 0 0-.73.59 9 9 0 0 0-.49 1 .64.64 0 0 0 0 .46c.22.45.47.89.73 1.32a.43.43 0 0 0 .25.19 3.82 3.82 0 0 0 2 0 .76.76 0 0 0 .31-.24 6.42 6.42 0 0 0 .42-.62c.17-.26.33-.54.51-.84l1.27.1c0 .62-.59.85-.7 1.33.18.26.36.43.68.35L15.64 5v-.21a22.24 22.24 0 0 0-3.1-2.73 2.62 2.62 0 0 0-.73-.3 1 1 0 0 0-.75 0c.24.17.46.31.67.48.53.42.57.64.29 1.43zM6.09 6.2c-.3-.4-.53-.68-.74-1a1.1 1.1 0 0 1-.2-.51 3.43 3.43 0 0 1 .36-2.08.9.9 0 0 0 .24-.61 11.53 11.53 0 0 0-1.84 1.2A10.47 10.47 0 0 0 2 4.43l.88.5a5.13 5.13 0 0 1 .76.43 4.57 4.57 0 0 0 2.45.84z"></path>
I was wondering why is it laid out like this? For security reasons? And how does something with such a strange path string actually locate the relevant path.
Any information regarding this would be much appreciated.
Kind regards,
Sam
That's an SVG path element.
It describes the path a line takes (not a file path!) using coordinates, lengths, and so on.
It has nothing to do with security.
<svg>
<path d="M5.47 7.2l-.55.33a5.14 5.14 0 0 1-3.2-1.28C1.48 6 1.2 5.88.94 5.7A2.39 2.39 0 0 1 0 4.4a7.29 7.29 0 0 1 1.61-1.21c.56-.4 1.13-.78 1.73-1.19l.54.18c.29-.74.29-.75 1-1.1A9.45 9.45 0 0 1 6.23.52 17.77 17.77 0 0 1 8 .14c.09 0 .19.06.29.08s.24.07.28 0A.78.78 0 0 1 9.24 0a5.47 5.47 0 0 1 1.66.09c.38.11.75.26 1.13.37s.35.29.44.56a.7.7 0 0 1 .8 0A8.54 8.54 0 0 1 16 3.54 14.5 14.5 0 0 0 17.11 5a2.55 2.55 0 0 1-1 .92c-.72.39-1.45.77-2.18 1.14s-.65.32-1.09-.24c-.45.09-.41.58-.72.85A13.77 13.77 0 0 1 6.7 8a1.15 1.15 0 0 1-1-.57c-.01-.1-.1-.14-.23-.23zm5.15-3.67c-.16-.35-.26-.62-.41-.87a1.12 1.12 0 0 0-1-.62 4.75 4.75 0 0 0-1.48.26 1.22 1.22 0 0 0-.73.59 9 9 0 0 0-.49 1 .64.64 0 0 0 0 .46c.22.45.47.89.73 1.32a.43.43 0 0 0 .25.19 3.82 3.82 0 0 0 2 0 .76.76 0 0 0 .31-.24 6.42 6.42 0 0 0 .42-.62c.17-.26.33-.54.51-.84l1.27.1c0 .62-.59.85-.7 1.33.18.26.36.43.68.35L15.64 5v-.21a22.24 22.24 0 0 0-3.1-2.73 2.62 2.62 0 0 0-.73-.3 1 1 0 0 0-.75 0c.24.17.46.31.67.48.53.42.57.64.29 1.43zM6.09 6.2c-.3-.4-.53-.68-.74-1a1.1 1.1 0 0 1-.2-.51 3.43 3.43 0 0 1 .36-2.08.9.9 0 0 0 .24-.61 11.53 11.53 0 0 0-1.84 1.2A10.47 10.47 0 0 0 2 4.43l.88.5a5.13 5.13 0 0 1 .76.43 4.57 4.57 0 0 0 2.45.84z"></path>
</svg>
we are searching for the simplest implementation of this boolean logic function :
you can only use this logic elements : AND,OR,NOT,XOR.
thanks in advance.
Assuming this is the required truth table:
A B C D X
0 0 0 0 1
0 0 0 1 0
0 0 1 0 0
0 0 1 1 1
0 1 0 0 0
0 1 0 1 1
0 1 1 0 1
0 1 1 1 0
1 0 0 0 0
1 0 0 1 1
1 0 1 0 1
1 0 1 1 0
1 1 0 0 0
1 1 0 1 0
1 1 1 0 0
1 1 1 1 0
Then this seems to be the best implementation:
X = (A^B).(C^D) + (A'.B').(C^D)'
I needed some image-like illustration of something to do with IT, found an image of The Matrix characters and thought I might make that binary code and have it drop like it does in the movie.
So, should I use the code in my example (with hated MARQUEE tag (usually not a fan myself)), an animated GIF or are there better solutions other then not doing it at all ?
Are there any SEO problems when using MARQUEE (other then the effect it might have on visitors behavior on the website) ?
http://jsfiddle.net/fruLg/
CSS
#marq{ background-color: #000;
height: auto;
width: 27em;
}
#marqt{ font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
color: #31B404;
}
#marqt td{ width: 0.7em;
}
HTML
<div id="marq">
<table id="marqt">
<td><marquee scrollamount="4" behavior="scroll" direction="down">0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1</marquee></td>
<td><marquee scrollamount="3" behavior="scroll" direction="down"> 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="5" behavior="scroll" direction="down">0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1</marquee></td>
<td><marquee scrollamount="2" behavior="scroll" direction="down">0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down"> 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0</marquee></td>
<td><marquee scrollamount="5" behavior="scroll" direction="down"> 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="2" behavior="scroll" direction="down">0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down"> 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0</marquee></td>
<td><marquee scrollamount="3" behavior="scroll" direction="down">0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down">0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1</marquee></td>
<td><marquee scrollamount="3" behavior="scroll" direction="down"> 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="5" behavior="scroll" direction="down">0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1</marquee></td>
<td><marquee scrollamount="2" behavior="scroll" direction="down">0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down"> 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0</marquee></td>
<td><marquee scrollamount="5" behavior="scroll" direction="down"> 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="2" behavior="scroll" direction="down">0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down"> 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0</marquee></td>
<td><marquee scrollamount="3" behavior="scroll" direction="down">0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down">0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1</marquee></td>
<td><marquee scrollamount="3" behavior="scroll" direction="down"> 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="5" behavior="scroll" direction="down">0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1</marquee></td>
<td><marquee scrollamount="2" behavior="scroll" direction="down">0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down"> 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0</marquee></td>
<td><marquee scrollamount="5" behavior="scroll" direction="down"> 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="2" behavior="scroll" direction="down">0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down"> 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0</marquee></td>
<td><marquee scrollamount="3" behavior="scroll" direction="down">0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down">0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1</marquee></td>
<td><marquee scrollamount="3" behavior="scroll" direction="down"> 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="5" behavior="scroll" direction="down">0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1</marquee></td>
<td><marquee scrollamount="2" behavior="scroll" direction="down">0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down"> 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0</marquee></td>
<td><marquee scrollamount="5" behavior="scroll" direction="down"> 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1</marquee></td>
<td><marquee scrollamount="2" behavior="scroll" direction="down">0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0</marquee></td>
<td><marquee scrollamount="4" behavior="scroll" direction="down"> 0 1 0 0 0 1 0 1 0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0</marquee></td>
<td><marquee scrollamount="3" behavior="scroll" direction="down">0 0 1 0 0 0 0 0 0 1 0 1 0 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 1 1 0 0 0 1 1 0 0 1 0 1 0 1 1 0 0 0 1 1 0 1 1 0 1 1 1 1 0 1 1 0 1 1 0 1 0 1 0 1 0 1 0 0 0 1 0 0 0 1 0 1</marquee></td>
</table>
</div>
You can simply use CSS3 transitions with keyframes to animate single <span> elements with your desired text. This would be the modern way. Otherwise an animated image should be good either.
<marquee> should never be used because it's no standard.
Edit: See http://jsfiddle.net/yEsw6/
Not perfect but it's the beginning. :)