Menu
Community /Pin to ProfileBookmark
@cootheadAug 30.2015 — #Hi there OM2,
[indent]
here is one possible solution...
[/indent]
[i]coothead[/i]@cootheadAug 30.2015 — #Hi there OM2,
[indent]
something like this, perhaps...
[/indent]
[i]coothead[/i]@cootheadSep 02.2015 — #Hi there OM2,
[indent]
check out the attachment to see those options. ?
I have also prevented the removal of the "colspan" and "rowspan"
attributes to preserve the basic table structure.
[/indent]
[i]coothead[/i]
[canned-message]attachments-removed-during-migration[/canned-message]
How can I copy a HTML table and remove all formatting?
I want to copy a HTML table from a webpage.
But I don’t want the width or anything else given for styling and size.
I’ve tried pasting into word (bad idea).
I’ve tried Excel. No luck.
In the end, I always have to go into the source code and manually mass replace font sizes, widths, heights etc – super annoying and time consuming!
Any other way?
Thanks
OM
Sign in
to post a comment6 Comments(s) ↴
0
@cootheadAug 30.2015 — #Hi there OM2,[indent]
here is one possible solution...
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<style media="screen">
body {
background-color:#f0f0f0;
}
#conditioned {
display:block;
width:400px;
height:440px;
padding-left:10px;
border:1px solid #999;
margin:auto;
background-color:#fff;
font-family:'courier new',monospace;
}
</style>
</head>
<body>
<div id="mytable">
[color=green]
<TABLE BORDER="3" CELLSPACING="1" CELLPADDING="1">
<CAPTION>The Bradys</CAPTION>
<TR>
<TD ALIGN="center">Agnes</TD>
<TD ALIGN="center" style="width:300px;height:200px">Wilma</TD>
<TD ALIGN="center">George</TD>
</TR>
<TR>
<TD ALIGN="center">Gwen</TD>
<TD ALIGN="center" style="background-color:#f00">Skippy</TD>
<TD ALIGN="center">Alvin</TD>
</TR>
<TR>
<TD ALIGN="center">Harry</TD>
<TD ALIGN="center">Melvin</TD>
<TD ALIGN="center">Joe</TD>
</TR>
</TABLE>
[/color]
</div>
<textarea id="conditioned"></textarea>
<script>
(function() {
'use strict';
var t=document.getElementsByTagName('table'),
m=document.getElementById('mytable'),
j,k,l;
for(j=t[0].attributes.length-1;j>=0;j--){
t[0].removeAttributeNode(t[0].attributes[j]);
}
for(j=0;j<t[0].rows.length;j++){
for(k=0;k<t[0].rows[j].cells.length;k++){
for(l=t[0].rows[j].cells[k].attributes.length-1;l>=0;l--){ <br/>
t[0].rows[j].cells[k].removeAttributeNode(t[0].rows[j].cells[k].attributes[l]);
}
}
}
m.innerHTML=m.innerHTML.replace(/</g,'&lt;');
m.innerHTML=m.innerHTML.replace(/>/g,'&gt;');
document.getElementById('conditioned').innerHTML=m.innerHTML;
m.innerHTML='';
})();
</script>
</body>
</html>[/color][/indent]
[i]coothead[/i]
0
@cootheadAug 30.2015 — #Hi there OM2,[indent]
something like this, perhaps...
[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<style media="screen">
body {
background-color:#f0f0f0;
}
#mytable {
margin:auto;
}
#mytable tr:first-of-type {
font-weight:bold;
}
#mytable tr:first-of-type td {
background-color:#eff;
}
#mytable td {
padding:5px 10px;
border:1px solid #999;
border-radius:5px;
background-color:#fff;
box-shadow:inset 0 0 5px #999;
}
#mytable td:first-of-type {
background-color:#fee;
}
</style>
</head>
<body>
[color=green]
<TABLE BORDER="3" CELLSPACING="1" CELLPADDING="1">
<CAPTION>The Bradys</CAPTION>
<TR>
<TD ALIGN="center">Agnes</TD>
<TD ALIGN="center" style="width:300px;height:200px">Wilma</TD>
<TD ALIGN="center">George</TD>
</TR>
<TR>
<TD ALIGN="center">Gwen</TD>
<TD ALIGN="center" style="background-color:#f00">Skippy</TD>
<TD ALIGN="center">Alvin</TD>
</TR>
<TR>
<TD ALIGN="center">Harry</TD>
<TD ALIGN="center">Melvin</TD>
<TD ALIGN="center">Joe</TD>
</TR>
</TABLE>
[/color]
<script>
(function() {
'use strict';
var t=document.getElementsByTagName('table'),
m=document.getElementById('mytable'),
j,k,l;
for(j=t[0].attributes.length-1;j>=0;j--){
t[0].removeAttributeNode(t[0].attributes[j]);
}
for(j=0;j<t[0].rows.length;j++){
for(k=0;k<t[0].rows[j].cells.length;k++){
for(l=t[0].rows[j].cells[k].attributes.length-1;l>=0;l--){ <br/>
t[0].rows[j].cells[k].removeAttributeNode(t[0].rows[j].cells[k].attributes[l]);
t[0].id='mytable';
}
}
}
})();
</script>
</body>
</html>[/color][/indent]
[i]coothead[/i]
0
@cootheadSep 02.2015 — #Hi there OM2,[indent]
check out the attachment to see those options. ?
I have also prevented the removal of the "colspan" and "rowspan"
attributes to preserve the basic table structure.
[/indent]
[i]coothead[/i]