Insert a tab or spaces in html

Question

I'm new to html and I got this piece of code:

@{ 
    ViewBag.Title = "Index";
}

<!DOCTYPE html>

<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>View1</title>
        <script src="~/Scripts/jquery-1.9.1.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>  
        <table>    
            @foreach (var item in Model.Data)
            { 
                <tr>
                    <td><a href=@Model.DataUrl[item.Key]>@item.Key</a></td>
                    <td>@item.Value</td>
                </tr>                        
            }
        </table>
    </body>
</html>

I want to add a tab or spaces between: <td><a href=@Model.DataUrl[item.Key]>@item.Key</a></td> and <td>@item.Value</td> how do I do that?

I guess adding css is the best way but I don't understand how to use it.

Do you mean you want to create a gap between the `td`s? You probably want to either use margin or padding, both css properties — James Thorpe, Dec 10 '14 at 14:01
Is there a way to add the css propery without creating a new .css file? — President Camacho, Dec 10 '14 at 14:04

JLRishe · Accepted Answer · 2018-01-03T07:11:59.190

23

You can add padding to your td with CSS:

td {
  padding-right: 30px;
}

<table>
  <tr>
    <td><a href="#">Hello</a></td>
    <td>Goodbye</td>
  </tr>
  <tr>
    <td><a href="#">Hola</a></td>
    <td>Adios</td>
  </tr>
</table>

or give them a fixed width:

td {
  min-width: 200px;
}

<table>
  <tr>
    <td><a href="#">Hello</a></td>
    <td>Goodbye</td>
  </tr>
  <tr>
    <td><a href="#">Hola</a></td>
    <td>Adios</td>
  </tr>
</table>

edited Jan 03 '18 at 07:11

answered Dec 10 '14 at 14:01

JLRishe

99,490
19
131
169

Is there a way to add the css propery without creating a new .css file? – President Camacho Dec 10 '14 at 14:05
@PresidentCamacho Yes, as I alread said, you can just drop those ` – JLRishe Dec 10 '14 at 14:09
I added the – President Camacho Dec 10 '14 at 14:24
1

Of course it would be bad practice to add styling to all TDs like this. It is better to add classes instead and style those. – Micros Mar 07 '18 at 10:37

score 8 · Answer 2 · edited Dec 10 '14 at 14:07

8

`&nbsp;` is a space
`&#09;` is a tab

Just insert them where you want

For the CSS, you should use the padding property, there are plenty of tutorials on the web, and samples

edited Dec 10 '14 at 14:07

Gerwin

1,572
5
23
51

answered Dec 10 '14 at 14:00

Deblaton Jean-Philippe

11,188
3
49
66

3

Tab or space between two table columns? – Adriano Repetti Dec 10 '14 at 14:01
Just try it! If you fail, put your blank space into the column... – Deblaton Jean-Philippe Dec 10 '14 at 14:06
I tries adding like this: @item.Value but that doesn't do anything. adding without ; makes @item.Value a string and not a variable. – President Camacho Dec 10 '14 at 14:07
You must put it into the column – Deblaton Jean-Philippe Dec 10 '14 at 14:09
how do I add it into a column? – President Camacho Dec 10 '14 at 14:14

score 3 · Answer 3 · edited May 23 '17 at 12:00

3

<table style="border-spacing: 10px;">

Or in a CSS block somewhere:

table {
  border-spacing: 10px;
}

Source : Add space between cells (td) using css

edited May 23 '17 at 12:00

Community

1
1

answered Dec 10 '14 at 14:03

Djoezz

80
1
9

score 2 · Answer 4 · answered Dec 10 '14 at 14:02

2

You mean visual whitespace?

In that case, check this link for:

How to add styles for a table
The paragraph Table Padding specifically.

Basic CSS isn't that hard.

answered Dec 10 '14 at 14:02

FDM

628
6
18

Insert a tab or spaces in html

4 Answers4