Cells table spacing with CSS/HTML

Question

I'm really new with HTML/CSS but I need to use both langages in order to realize my Django web application.

I get a problem with my <table> because the cells spacing doesn't take account from my css file.

.navbar {
  background-color: #0083A2;
}
.nav navbar-brand {
  color: #FFFFFF;
}
.active {
  background-color: #454545;
}
h1,
h2,
h4 {
  color: #0083A2;
}
.button {
  display: inline;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  font-size: 16px;
  border: 2px solid #000000;
  background-color: #e8e8e8;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
.form-fields {
  border-radius: 8px;
  margin-right: auto;
}
.col-sm-6 {
  display: inline-block;
  margin-left: 10px;
  width: 30%;
  list-style: None;
}
.col-sm-8 {
  list-style: initial;
}
.col-sm-10 {
  display: inline-block;
  margin-left: 10px;
  width: 800%;
  list-style: None;
}
.button:hover {
  background-color: #0083A2;
  color: #454545;
}
table {
  border-spacing: 100px;
}

<div class="col-sm-8">
  <h4><b><font color="#0083A2"> Récapitulatif des 3 dernières fiches individuelles créées: </b></font></h4>
  <table>
    <tbody>
      <tr>
        <th>ID</th>
        <th>Civilité</th>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Date de Naissance</th>
        <th>Ville de Naissance</th>
        <th>Pays de Naissance</th>
      </tr>
      {% for item in identity %}
      <tr>
        <td>{{ item.id}}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.lastname }}</td>
        <td>{{ item.firstname }}</td>
        <td>{{ item.birthday }}</td>
        <td>{{ item.birthcity }}</td>
        <td>{{ item.birthcountry }}</td>
      </tr>
    </tbody>
  </table>
</div>

I wrote something wrong in my two scripts ? If you have advices, I will take account with pleasure !

Thank you !

EDIT :

This is my table :

But none answers make a space between cells ..

@falguni — What makes you think the OP is trying to **remove** the spacing? They've explicitly set it to a large number. — Quentin, Dec 29 '16 at 10:28
@falguni Doesn't work .. `border-spacing` and `border-collapse` have no effect on my html page — Essex, Dec 29 '16 at 10:29
@Quentin Spacing are working, but you forgot `{% for item in identity %}` between `` and ``. The problem comes from there ? — Essex, Dec 29 '16 at 10:30
— That's template code which won't appear in the final DOM. Adding it to the HTML (instead of to a template language which gets converted into HTML) makes the HTML invalid. — Quentin, Dec 29 '16 at 10:30
@falguni — They're already doing that (which is why the code in the question works) — Quentin, Dec 29 '16 at 10:31
@Quentin It's for Django application. With Django, it works like that : mix pythonic variables with HTML — Essex, Dec 29 '16 at 10:33
— Yes, but the live demo embedded in the question **isn't** a Django application, so the template won't be processed, and what you type is what will be sent to the browser. — Quentin, Dec 29 '16 at 10:34
I don't know why exactly, but it doesn't work. Even if I remove pythonic variable inside my html code. I need to use HTML template to generate view in my Django application, and for the moment I can't. I don't get table cells spacing as I want. — Essex, Dec 29 '16 at 10:37
We can't tell why it doesn't work either. You haven't shown us the problem. You need a [mcve]. — Quentin, Dec 29 '16 at 10:39

score 0 · Answer 1 · edited May 23 '17 at 11:53

0

This question might be also solved by this: Set cellpadding and cellspacing in CSS?

I would like to suggest to read more about table and what you can do from css and specificly what you cannot do.

In this case you can change the cellpadding or cellspacing off a table from css by using other similar properties. You can manipulate the padding of the cells which is an equivalent of cellpadding and border-spacing for cellspacing.

I suggest you read a bit more about it as you have a lot of css for the table elements that seems out of place (like list-style).

Good starting reference could be this: http://www.w3schools.com/html/html_tables.asp

edited May 23 '17 at 11:53

Community

1
1

answered Dec 29 '16 at 10:47

George Antonakos

698
5
12

"In this case you cannot change the cellpadding or cellspacing off a table from css" — Why not? – Quentin Dec 29 '16 at 10:53
Thanks, I found a solution : write css directly inside my HTML code and it works ! – Essex Dec 29 '16 at 10:53
@Valentin — Why did you accept this the answer which solved your problem? Your comment says that your solution is completely different to anything suggested here. – Quentin Dec 29 '16 at 10:54
@Quentin Wait I'm writting the answer and my working script. – Essex Dec 29 '16 at 10:54
@Quentin check here: http://www.w3schools.com/css/css_table.asp There is property to change the cellpadding or cellspacing. There are other equivalent properties in css to achieve the same result by using `margin` and `padding`. – George Antonakos Dec 29 '16 at 10:57
@GeorgeAntonakos — "There is property to change the cellpadding or cellspacing." — Yes, and the code in the question is using one of the successfully. – Quentin Dec 29 '16 at 11:00
@GeorgeAntonakos — "There are other equivalent properties in css to achieve the same result by using margin and padding." — No. While `padding` is used instead of `cellpadding`, it is `border-spacing` that replaces `cellspacing` … and which is used in the code in the question. – Quentin Dec 29 '16 at 11:00
@Quentin you are correct about margin, I will edit my answer – George Antonakos Dec 29 '16 at 11:01

Essex · Answer 2 · 2016-12-29T11:00:07.283

I found the answer thanks to @GeorgesAntonakos :

I have to write css conditions directly inside my HTML template :

<style>
table, th, tr {
border: 1px solid black;
border-collapse: collapse;
}
</style>

    <div class="col-sm-8">
    <h4><b><font color="#0083A2"> Récapitulatif des 3 dernières fiches individuelles créées: </b></font></h4>
    <table style="width:100%">
        <tbody>
        <tr>
            <th>ID</th>
            <th>Civilité</th>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Date de Naissance</th>
            <th>Ville de Naissance</th>
            <th>Pays de Naissance</th>
        </tr>
        {% for item in identity %}
        <tr>
            <td>{{ item.id}}</td>
            <td>{{ item.title }}</td>
            <td>{{ item.lastname }}</td>
            <td>{{ item.firstname }}</td>
            <td>{{ item.birthday }}</td>
            <td>{{ item.birthcity }}</td>
            <td>{{ item.birthcountry }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    <br></br>
    </div>

This solution works for me.

`border-collapse: collapse;` — This does the opposite of what the code in the question (which you said was being ignored) does. You've removed the spacing between the cells instead of setting it to 100px now. — Quentin, Dec 29 '16 at 10:58
I didn't mention anything regarding that in my answer. I adviced you to read more about tables and maybe use `padding` and `border-spacing` to achieve the spacing you need for your layout. — George Antonakos, Dec 29 '16 at 10:59
@GeorgeAntonakos Yeah and I found a correct solution from your link ^^ — Essex, Dec 29 '16 at 11:00

score -2 · Answer 3 · answered Dec 29 '16 at 10:39

use

!important;

in your css code more details :https://appendto.com/2016/04/css-important-rule-how-to-use-it-correctly/

.navbar {
  background-color: #0083A2;
}
.nav navbar-brand {
  color: #FFFFFF;
}
.active {
  background-color: #454545;
}
h1,
h2,
h4 {
  color: #0083A2;
}
.button {
  display: inline;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  font-size: 16px;
  border: 2px solid #000000;
  background-color: #e8e8e8;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
.form-fields {
  border-radius: 8px;
  margin-right: auto;
}
.col-sm-6 {
  display: inline-block;
  margin-left: 10px;
  width: 30%;
  list-style: None;
}
.col-sm-8 {
  list-style: initial;
}
.col-sm-10 {
  display: inline-block;
  margin-left: 10px;
  width: 800%;
  list-style: None;
}
.button:hover {
  background-color: #0083A2;
  color: #454545;
}
table {
  border-spacing: 10px !important;
}

<div class="col-sm-8">
  <h4><b><font color="#0083A2"> Récapitulatif des 3 dernières fiches individuelles créées: </b></font></h4>
  <table>
    <tbody>
      <tr>
        <th>ID</th>
        <th>Civilité</th>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Date de Naissance</th>
        <th>Ville de Naissance</th>
        <th>Pays de Naissance</th>
      </tr>
      {% for item in identity %}
      <tr>
        <td>{{ item.id}}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.lastname }}</td>
        <td>{{ item.firstname }}</td>
        <td>{{ item.birthday }}</td>
        <td>{{ item.birthcity }}</td>
        <td>{{ item.birthcountry }}</td>
      </tr>
    </tbody>
  </table>
</div>

Nothing too .. I don't know why, but all answers don't bring any effect on my table. — Essex, Dec 29 '16 at 10:44
please give more details of your table and questions then we understand actually what is your requirement . — Ankit, Dec 29 '16 at 10:47

Cells table spacing with CSS/HTML

3 Answers3