Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <style>
    
    #mtd{
      font:normal small-caps 900 X-large 고딕,
        arial,serif;height:50px;      
    }
    .mtdc{background-color:aqua;}
    .mtrc{background-color:lime;}
    .text1{letter-spacing:5px;}
    .text2{word-spacing:30px;}
    .text3{letter-spacing:5px; word-spacing:30px;}
    .text4{line-height:200%;}
    .text5{text-align:center;}
    .text6{text-align:justify;}
    .text7{text-align:left;}
    .text8{vertical-align:baseline;}
    .text9{vertical-align:super;}
    .text10{vertical-align:sub;}
    .text11{vertical-align:top;}
    .text12{vertical-align:middle;}
    .text13{vertical-align:bottom;}
    .text14{text-indent:50px;}
    .text15{text-indent:25%;}
    .text16{text-decoration:overline;}
    .text17{text-decoration:line-through;}
    .text18{text-decoration:underline;}
    .text19{text-decoration:blink;}
    .text20{text-decoration:overline;}
    .text21{text-transform:capitalize;}
    .text22{text-transform:uppercase;}
    .text23{text-transform:lowercase;}
  </style>
<table width = "100%" border = "1" style = "border-collapse:collapse;">
  <tr class = "mtrc">
    <td colspan = "3">normal</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr class = "mtrc">
    <td  colspan = "3">.text1{letter-spacing:5px;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text1 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text2{word-spacing:30px;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text2 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text3{letter-spacing:5px; word-spacing:30px;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text3 mtdc"  colspan = "2">Hello text attribute</td>
  </tr>
   <tr>
    <td class = "mtrc" colspan = "3">normal</td>
  </tr>
  <tr>
    <td width = "25%"></td><td class = "mtdc" colspan = "2">
    Hello text attribute<br />
    Hello text attribute<br />
    Hello text attribute</td>
  </tr>
   <tr>
    <td class = "mtrc" colspan = "3">.text4{line-height:200%;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtdc" class = "text4 mtdc"  colspan = "2">
    Hello text attribute<br />
    Hello text attribute<br />
    Hello text attribute</td>
  </tr>
   <tr>
    <td class = "mtrc" colspan = "3">.text5{text-align:center;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text5 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text6{text-align:justify;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text6 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text7{text-align:left;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text7 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text6 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text8{vertical-align:baseline;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text8 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
 
  <tr>
    <td class = "mtrc" colspan = "3">.text9{vertical-align:super;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text9 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text10{vertical-align:sub;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text10 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text11{vertical-align:top;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text11 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text12{vertical-align:middle;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text12 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text13{vertical-align:bottom;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text13 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text14{text-indent:50px;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text14 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text15{text-indent:25%;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text15 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text16{text-decoration:overline;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text16 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text17{text-decoration:line-through;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text17 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text18{text-decoration:underline;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text18 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text19{text-decoration:blink;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td id = "mtd" class = "text19 mtdc" colspan = "2">Hello text attribute</td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text21{text-transform:capitalize;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td  class = "text21 mtdc" colspan = "2"><font size="5"  face="고딕,arial,sans">Hello text attribute</font></td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text21{text-transform:uppercase;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td  class = "text22 mtdc" colspan = "2"><font size="5"  face="고딕,arial,sans">Hello text attribute</font></td>
  </tr>
  <tr>
    <td class = "mtrc" colspan = "3">.text21{text-transform:lowercase;}</td>
  </tr>
  <tr>
    <td width = "25%"></td><td  class = "text23 mtdc" colspan = "2"><font size="5"  face="고딕,arial,sans">Hello text attribute</font></td>
  </tr>
​
  </table>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x