CODEWITHSUNDEEP
htmlcss
aquaelmo
aquaelmo

Reputation: 89

Putting a space between two different tables in HTML

I want about 30 tables on a page in a grid like format but I am having trouble putting any spacing between all of them. This is what I have right now: 

<table>
 <tr>
  <th><span class="prizestitle">Table</span></th>
 </tr>
 <tr>
   <td><span class="prizesinfo">Info</span></td>
  </tr>
 <tr>
   <td><span class="prizesdesc">Description</span></td>
  </tr>
</table>
<table>
  <tr>
    <th><span class="prizestitle">Table</span></th>
  </tr>
  <tr>
    <td><span class="prizesinfo">Info</span></td>
  </tr>
  <tr>
    <td><span class="prizesdesc">Description</span></td>
  </tr>
</table>
<table>
  <tr>
    <th><span class="prizestitle">Table</span></th>
  </tr>
  <tr>
    <td><span class="prizesinfo">Info</span></td>
  </tr>
  <tr>
    <td><span class="prizesdesc">Description</span></td>
  </tr>
</table>

table {
  border-collapse: collapse;
  border: 1px solid gray;
  width: 50%;
  float: left;
}

th {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  background-color: #6666ff;
}

td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.prizestitle {
  font-size: 30px;
}

.prizesinfo {
  font-size: 25px;
}

.prizesdesc {
  font-size: 18px;
}

Here is the jsfiddle: https://jsfiddle.net/ohLa00m7/1/

Something similar to how to boxes are layed out here (http://www.awwwards.com/blog/) is what I am looking for.

Thanks for any help!

Upvotes: 4

Views: 62297

Answers (8)

tullki
tullki

Reputation: 11

i know this is kinda stupid but you can just add empty paragraphs in between each table

    <table border="1" cellspacing="0">
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<p>       </p>
<table border="1" cellspacing="0">
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<p>       </p>
<table border="1" cellspacing="0">
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>

Upvotes: 1

Emad Armoun
Emad Armoun

Reputation: 2099

You can use margin and calc function in css :

table {
  border-collapse: collapse;
  border: 1px solid gray;
  width: calc(50% - 10px);
  float: left;
  margin: 5px;
}


table {
  border-collapse: collapse;
  border: 1px solid gray;
  width: calc(50% - 10px);
  float: left;
  margin: 5px;
}

th {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  background-color: #6666ff;
}

td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.prizestitle {
  font-size: 30px;
}

.prizesinfo {
  font-size: 25px;
}

.prizesdesc {
  font-size: 18px;
}
<table>
  <tr>
    <th><span class="prizestitle">Table</span></th>
  </tr>
  <tr>
    <td><span class="prizesinfo">Info</span></td>
  </tr>
  <tr>
    <td><span class="prizesdesc">Description</span></td>
  </tr>
</table>
<table>
  <tr>
    <th><span class="prizestitle">Table</span></th>
  </tr>
  <tr>
    <td><span class="prizesinfo">Info</span></td>
  </tr>
  <tr>
    <td><span class="prizesdesc">Description</span></td>
  </tr>
</table>
<table>
  <tr>
    <th><span class="prizestitle">Table</span></th>
  </tr>
  <tr>
    <td><span class="prizesinfo">Info</span></td>
  </tr>
  <tr>
    <td><span class="prizesdesc">Description</span></td>
  </tr>
</table>
<table>
  <tr>
    <th><span class="prizestitle">Table</span></th>
  </tr>
  <tr>
    <td><span class="prizesinfo">Info</span></td>
  </tr>
  <tr>
    <td><span class="prizesdesc">Description</span></td>
  </tr>
</table>
<table>
  <tr>
    <th><span class="prizestitle">Table</span></th>
  </tr>
  <tr>
    <td><span class="prizesinfo">Info</span></td>
  </tr>
  <tr>
    <td><span class="prizesdesc">Description</span></td>
  </tr>
</table>
<table>
  <tr>
    <th><span class="prizestitle">Table</span></th>
  </tr>
  <tr>
    <td><span class="prizesinfo">Info</span></td>
  </tr>
  <tr>
    <td><span class="prizesdesc">Description</span></td>
  </tr>
</table>

Upvotes: 8

Sakaratte
Sakaratte

Reputation: 128

Using <div> instead of tables would work better.

My version of this code:

HTML

<div class="shell">
    <div class="prizestitle">Table</div>
    <div class="prizesinfo td">Info</div>
    <div class="prizesdesc td">Description</div>
</div>

CSS

.td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}

.prizestitle {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
background-color: #6666ff;
font-size: 30px;
font-weight: 200;

}

.prizesinfo {
    font-size: 25px;

}

.prizesdesc {
    font-size: 18px;

}

.shell {
    border: 1px solid gray;
    border-collapse: collapse;
    width: calc(50% - 40px);
    margin: 10px;
    display: inline-block;
    float: left;
}

Upvotes: 2

arnuga3
arnuga3

Reputation: 241

You may play around making border wider and include this width into size of the table container like

table {
   border: 10px solid gray;
   width: 50%;
   box-sizing: border-box;
   float: left;
}

Upvotes: 0

Karl Galvez
Karl Galvez

Reputation: 843

See if this CSS does what you want

table {
    border-collapse: collapse;
    border: 1px solid gray;
    width: 30%;
    float: left;
    margin: 10px;
}

You can adjust the width percentage and margin to get different spacing and tables per line.

Upvotes: 1

user4850364
user4850364

Reputation:

Try

<table cellspacing="10">

Upvotes: 0

Tarek.hms
Tarek.hms

Reputation: 1283

Simply just adding a margin to the table will add spaces between tables But I would tell you that it's impossible to achieve the result as you have shown by using tables to do so you should replace them with Divs and you may need to use some javascript libraries.

to add a margin:

table {
border-collapse: collapse;
border: 1px solid gray;
width: 50%;
float: left;
margin:5px;
}

Upvotes: 2

Zsolt
Zsolt

Reputation: 39

You can try: 

 <table cellspacing="10">

but it doesn't work in HTML 5 as far as I know.

Or in the CSS insert something like this:

table {
 border-collapse: collapse;
 border: 1px solid gray;
 width: 50%;
 float: left;
 border-collapse: separate;
 border-spacing: 10px;
}

Upvotes: 0

Related Questions