Zach Galant Zach Galant - 1 year ago 56
CSS Question

How to remove unwanted space between rows and columns in table?

how do I remove the extra space between the rows and columns in the table.

I've tried changing the margin, padding, and various border properties on the table and tr and td.

I want the pictures to all be right next to each other to look like one big image.

how should I fix this?


table {



<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="" xml:lang="en" lang="en">
<title>Tera Byte Video Game Creation Camp</title>
<link rel="stylesheet" type="text/css" href="style.css"></link>
<table class="mytable" align="center">
<tr class = "header"><td colspan="3"><img src="images/home_01.png" /></td></tr>
<tr class = "top"><td colspan="3"><img src="images/home_02.png" /></td></tr>
<tr class = "link-row">
<td><img src="images/home_03.png" /></td>
<td><img src="images/home_04.png" /></td>
<td><img src="images/home_05.png" /></td>
<tr class = "link-row">
<td><img src="images/home_07.png" /></td>
<td><img src="images/home_06.png" /></td>
<td><img src="images/home_08.png" /></td>
<tr class = "link-row">
<td><img src="images/home_09.png" /></td>
<td><img src="images/home_10.png" /></td>
<td><img src="images/home_11.png" /></td>
<tr class = "link-row">
<td><img src="images/home_12.png" /></td>
<td><img src="images/home_13.png" /></td>
<td><img src="images/home_14.png" /></td>
<tr class = "bottom"><td colspan="3"><img src="images/home_15.png"/ ></td></tr>


Answer Source

Add this CSS reset to your CSS code: (From here)

   v2.0 | 20110126
   License: none (public domain)

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
body {
    line-height: 1;
ol, ul {
    list-style: none;
blockquote, q {
    quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
table {
    border-collapse: collapse;
    border-spacing: 0;

It'll reset the CSS effectively, getting rid of the padding and margins.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download