Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <table>
	<tbody>
		<!-- 1 -->
		<tr>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
		</tr>
		<!-- 2 -->
		<tr>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
		</tr>
		<!-- 3 -->
		<tr>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
		</tr>
		<!-- 4 -->
		<tr>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
		</tr>
		<!-- 5 -->
		<tr>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
		</tr>
		<!-- 6 -->
		<tr>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
		</tr>
		<!-- 7 -->
		<tr>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
		</tr>
		<!-- 8 -->
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<!-- 9 -->
		<tr>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
		</tr>
		<!-- 10 -->
		<tr>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
		</tr>
		<!-- 11 -->
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<!-- 12 -->
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
		</tr>
		<!-- 13 -->
		<tr>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
		</tr>
		<!-- 14 -->
		<tr>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
		</tr>
		<!-- 15 -->
		<tr>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
		</tr>
		<!-- 16 -->
		<tr>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
		</tr>
		<!-- 17 -->
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
		</tr>
		<!-- 18 -->
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
		</tr>
		<!-- 19 -->
		<tr>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
		</tr>
		<!-- 20 -->
		<tr>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<!-- 21 -->
		<tr>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
		</tr>
		<!-- 22 -->
		<tr>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
		</tr>
		<!-- 23 -->
		<tr>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
		</tr>
		<!-- 24 -->
		<tr>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
		</tr>
		<!-- 25 -->
		<tr>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
			<td class="bk"></td>
		</tr>

	</tbody>
</table>
              
            
!

CSS

              
                table{
  background:#fff;
}
tr{
  display:flex;
}
td{
  width:5px;
  height:5px;
  border-collapse: collapse;
  border-spacing: 0;
  display:block;
}
td.bk{
  background:#000;
}
              
            
!

JS

              
                
              
            
!
999px

Console