[html] Removing border from table cells

I know this is a dumb question but I seem to have totally forgotten how to do it.

I have a HTML table and I want to remove all borders around all the cells so that there is only one border around the entire table.

My code looks like:

<table border='1' width='500'>
  <tr><th><h1>Your Wheelbarrow</h1></th><tr>
    <th>Product</th>
    <th>Description</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
    <th>Delete</th>
  </tr>

Change your table declaration to:

<table style="border: 1px dashed; width: 500px;">

Here is the sample in action: http://jsfiddle.net/kc48k/

<style type="text/css">
table {
  border:1px solid black;
}
</style>

If none of the solutions on this page work and you are having the below issue:

You can simply use this snippet of CSS:

td {
   padding: 0;
}

Just use your table inside a div with a class (.table1 for example) and don't set any border for this table in CSS. Then use CSS code for that class.

.table1 {border=1px solid black;}

The HTML attribute for the purpose is rules=none (to be inserted into the table tag).

You might want to try this: http://jsfiddle.net/QPKVX/

Not really sure what you want your final layout to look like- but that fixes the colspan problem too.

Probably you just needed this CSS rule:

table {
   border-spacing: 0px;
}

http://jsfiddle.net/Bz3Jt/3/