The bootstrap table with detached header - html
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.
Related
Load cell array from text file to Octave
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!
Html path location strange format
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>
logic function simplification and implementation
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)'
How to store and query a lot of matrices?
Problem: Given are k N x M dimensional matrices (e.g. M1 .. M5). Values are zero and ones only. How would you find all matrices that collide with a query matrix e.g. Q? Collision means if the query matrix have a "1" at the same position as the matrices from the database. Example: For this simple example the algorithm should find M1, M2, M3, M4 for the query but not M5 since there are not ones matching with the query matrix. M1: M3: +-----------------+ +-----------------+ | 0 0 0 0 0 0 0 0 | | 0 0 0 0 0 0 0 1 | | 0 1 1 0 0 0 0 0 | | 0 0 0 0 0 0 0 0 | | 0 1 1 0 0 1 1 0 | | 0 0 1 0 0 0 0 0 | | 0 0 0 0 0 0 0 0 | | 0 0 1 0 0 0 0 1 | +-----------------+ +-----------------+ M2: M4: +-----------------+ +-----------------+ | 0 0 0 0 0 1 1 0 | | 0 0 0 0 0 0 0 0 | | 0 0 1 1 0 0 0 0 | | 1 1 1 0 0 0 0 0 | | 0 0 0 0 0 0 0 0 | | 0 0 0 0 0 0 0 0 | | 0 0 0 0 0 0 0 0 | | 0 0 0 0 0 0 0 0 | +-----------------+ +-----------------+ M5: +-----------------+ | 0 0 0 0 0 0 0 0 | | 0 0 0 0 1 0 0 0 | | 0 0 0 0 0 1 0 0 | | 0 0 0 0 0 0 0 0 | +-----------------+ Q: +-----------------+ | 0 0 0 0 0 0 0 0 | | 0 0 1 0 0 0 0 0 | | 0 0 1 0 0 0 0 0 | | 0 0 0 0 0 0 0 0 | +-----------------+ Naive solution: Iterate over all matrices and do a bitwise AND: Match: M1: 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 1 1 0 0 1 1 0 0 0 0 0 0 0 0 0 Q: 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 -------------------------------------------------------------------------- M1 && Q: 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 -------------------------------------------------------------------------- No match: M5: 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 Q: 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -------------------------------------------------------------------------- M5 && Q: 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -------------------------------------------------------------------------- Questions: Can this be done in sub-linear time? Are there better algorithms than the given naive approach? What would be a good way to store and query the matrix data in a database? Note to question 3: I thought about storing the integer values of the matrices in a MySQL table and use a MySQL bitwise query to find them. Would this work (scale) if the matrices become much bigger e.g. 100x100?
1 & 2. A sub linear ( < O(n*m) ) solution could be achieved using sparse matrix approaches and terminating at the first collision. Basically at each row you have a list of indexes that have a 1 and see if there is a collision. Technically this can be O(n*m) if the Q has 0's except for the last column of 1's and M is just the inverse of that. 3.The answer to this part depends on the restrictions of your system and how the matrices are composed. If the matrices are not sparse, and you are looking at memory usage you could store rows as a collection of ints that decompose to the 1's and 0's. If the matrices are sparse you could simply store a collection of points.
Construct another matrix, say P, of size N*M where every element is a bitset of size k. P(i,j) has the k-th bit set if the k-th matrix has 1 at (i,j). Given Q, start off with an empty k-bitset, Result. For every (i,j) such that Q(i,j)==1, do Result |= P(i,j). This algorithm requires O(k*N*M) preprocessing time. Every subsequent query runs in O(N*M*(number of 1s in Q)).
The Matrix-style binary code, okay or BAD?
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. :)