HTML: Inline block doesn't work for just one table
I'm REALLY new to html, and I'm trying to create a html set of tables, I am using display : inline block and it works the way I want, to put some tables next to the others... but when I put just one table it doesnt shows the borders of the table. The code is the following:
table {
border: 1px solid black;
border-collapse:collapse;
display: inline-block;
}
h2.headertekst {
text-align: center;
color : white;
font-family: verdana
}
<!DOCTYPE html>
<html>
<head>
<body bgcolor="#3377ff">
<h2 class = "headertekst">Mis Pokemons Favoritos</h2>
<table bgcolor="#e52b50">
<tr>
<th rowspan="4">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/1.png">
</th>
<td style="color: white">Nombre: Bulbasaur</td>
</tr>
<tr>
<td style="color: white">Peso: 69</td>
</tr>
<tr>
<td style="color: white">Altura: 10</td>
</tr>
<tr>
<td style="color: white">Expreriencia Base: 64</td>
</tr>
</table>
</body>
</html>
and the rest is just the information on the cells
html display ccss
add a comment |
I'm REALLY new to html, and I'm trying to create a html set of tables, I am using display : inline block and it works the way I want, to put some tables next to the others... but when I put just one table it doesnt shows the borders of the table. The code is the following:
table {
border: 1px solid black;
border-collapse:collapse;
display: inline-block;
}
h2.headertekst {
text-align: center;
color : white;
font-family: verdana
}
<!DOCTYPE html>
<html>
<head>
<body bgcolor="#3377ff">
<h2 class = "headertekst">Mis Pokemons Favoritos</h2>
<table bgcolor="#e52b50">
<tr>
<th rowspan="4">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/1.png">
</th>
<td style="color: white">Nombre: Bulbasaur</td>
</tr>
<tr>
<td style="color: white">Peso: 69</td>
</tr>
<tr>
<td style="color: white">Altura: 10</td>
</tr>
<tr>
<td style="color: white">Expreriencia Base: 64</td>
</tr>
</table>
</body>
</html>
and the rest is just the information on the cells
html display ccss
share complete code, i think some of code is missing
– Naga Sai A
Nov 15 '18 at 19:44
Please post your full code so we can see the issue.
– Peter
Nov 15 '18 at 19:44
Just did, thank you guys
– Mauricio Sanabria Quesada
Nov 15 '18 at 20:05
add a comment |
I'm REALLY new to html, and I'm trying to create a html set of tables, I am using display : inline block and it works the way I want, to put some tables next to the others... but when I put just one table it doesnt shows the borders of the table. The code is the following:
table {
border: 1px solid black;
border-collapse:collapse;
display: inline-block;
}
h2.headertekst {
text-align: center;
color : white;
font-family: verdana
}
<!DOCTYPE html>
<html>
<head>
<body bgcolor="#3377ff">
<h2 class = "headertekst">Mis Pokemons Favoritos</h2>
<table bgcolor="#e52b50">
<tr>
<th rowspan="4">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/1.png">
</th>
<td style="color: white">Nombre: Bulbasaur</td>
</tr>
<tr>
<td style="color: white">Peso: 69</td>
</tr>
<tr>
<td style="color: white">Altura: 10</td>
</tr>
<tr>
<td style="color: white">Expreriencia Base: 64</td>
</tr>
</table>
</body>
</html>
and the rest is just the information on the cells
html display ccss
I'm REALLY new to html, and I'm trying to create a html set of tables, I am using display : inline block and it works the way I want, to put some tables next to the others... but when I put just one table it doesnt shows the borders of the table. The code is the following:
table {
border: 1px solid black;
border-collapse:collapse;
display: inline-block;
}
h2.headertekst {
text-align: center;
color : white;
font-family: verdana
}
<!DOCTYPE html>
<html>
<head>
<body bgcolor="#3377ff">
<h2 class = "headertekst">Mis Pokemons Favoritos</h2>
<table bgcolor="#e52b50">
<tr>
<th rowspan="4">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/1.png">
</th>
<td style="color: white">Nombre: Bulbasaur</td>
</tr>
<tr>
<td style="color: white">Peso: 69</td>
</tr>
<tr>
<td style="color: white">Altura: 10</td>
</tr>
<tr>
<td style="color: white">Expreriencia Base: 64</td>
</tr>
</table>
</body>
</html>
and the rest is just the information on the cells
table {
border: 1px solid black;
border-collapse:collapse;
display: inline-block;
}
h2.headertekst {
text-align: center;
color : white;
font-family: verdana
}
<!DOCTYPE html>
<html>
<head>
<body bgcolor="#3377ff">
<h2 class = "headertekst">Mis Pokemons Favoritos</h2>
<table bgcolor="#e52b50">
<tr>
<th rowspan="4">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/1.png">
</th>
<td style="color: white">Nombre: Bulbasaur</td>
</tr>
<tr>
<td style="color: white">Peso: 69</td>
</tr>
<tr>
<td style="color: white">Altura: 10</td>
</tr>
<tr>
<td style="color: white">Expreriencia Base: 64</td>
</tr>
</table>
</body>
</html>
table {
border: 1px solid black;
border-collapse:collapse;
display: inline-block;
}
h2.headertekst {
text-align: center;
color : white;
font-family: verdana
}
<!DOCTYPE html>
<html>
<head>
<body bgcolor="#3377ff">
<h2 class = "headertekst">Mis Pokemons Favoritos</h2>
<table bgcolor="#e52b50">
<tr>
<th rowspan="4">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/1.png">
</th>
<td style="color: white">Nombre: Bulbasaur</td>
</tr>
<tr>
<td style="color: white">Peso: 69</td>
</tr>
<tr>
<td style="color: white">Altura: 10</td>
</tr>
<tr>
<td style="color: white">Expreriencia Base: 64</td>
</tr>
</table>
</body>
</html>
html display ccss
html display ccss
edited Nov 15 '18 at 20:03
Mauricio Sanabria Quesada
asked Nov 15 '18 at 19:40
Mauricio Sanabria QuesadaMauricio Sanabria Quesada
63
63
share complete code, i think some of code is missing
– Naga Sai A
Nov 15 '18 at 19:44
Please post your full code so we can see the issue.
– Peter
Nov 15 '18 at 19:44
Just did, thank you guys
– Mauricio Sanabria Quesada
Nov 15 '18 at 20:05
add a comment |
share complete code, i think some of code is missing
– Naga Sai A
Nov 15 '18 at 19:44
Please post your full code so we can see the issue.
– Peter
Nov 15 '18 at 19:44
Just did, thank you guys
– Mauricio Sanabria Quesada
Nov 15 '18 at 20:05
share complete code, i think some of code is missing
– Naga Sai A
Nov 15 '18 at 19:44
share complete code, i think some of code is missing
– Naga Sai A
Nov 15 '18 at 19:44
Please post your full code so we can see the issue.
– Peter
Nov 15 '18 at 19:44
Please post your full code so we can see the issue.
– Peter
Nov 15 '18 at 19:44
Just did, thank you guys
– Mauricio Sanabria Quesada
Nov 15 '18 at 20:05
Just did, thank you guys
– Mauricio Sanabria Quesada
Nov 15 '18 at 20:05
add a comment |
2 Answers
2
active
oldest
votes
Why are you trying to do it inline? I would suggest using float:right on the tables
Because I will add a lot more of tables, so I need them to be ordered. It seems like float:right puts the table on the right part of the page
– Mauricio Sanabria Quesada
Nov 15 '18 at 20:01
add a comment |
If you want to add borders inside your tables you have to style td and th elements:
table td, table th {
border: 1px solid black;
}
Or if you need to add only vertical line:
table td, table th { border-left:1px solid black; }
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326824%2fhtml-inline-block-doesnt-work-for-just-one-table%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Why are you trying to do it inline? I would suggest using float:right on the tables
Because I will add a lot more of tables, so I need them to be ordered. It seems like float:right puts the table on the right part of the page
– Mauricio Sanabria Quesada
Nov 15 '18 at 20:01
add a comment |
Why are you trying to do it inline? I would suggest using float:right on the tables
Because I will add a lot more of tables, so I need them to be ordered. It seems like float:right puts the table on the right part of the page
– Mauricio Sanabria Quesada
Nov 15 '18 at 20:01
add a comment |
Why are you trying to do it inline? I would suggest using float:right on the tables
Why are you trying to do it inline? I would suggest using float:right on the tables
answered Nov 15 '18 at 19:45
glennoxglennox
1
1
Because I will add a lot more of tables, so I need them to be ordered. It seems like float:right puts the table on the right part of the page
– Mauricio Sanabria Quesada
Nov 15 '18 at 20:01
add a comment |
Because I will add a lot more of tables, so I need them to be ordered. It seems like float:right puts the table on the right part of the page
– Mauricio Sanabria Quesada
Nov 15 '18 at 20:01
Because I will add a lot more of tables, so I need them to be ordered. It seems like float:right puts the table on the right part of the page
– Mauricio Sanabria Quesada
Nov 15 '18 at 20:01
Because I will add a lot more of tables, so I need them to be ordered. It seems like float:right puts the table on the right part of the page
– Mauricio Sanabria Quesada
Nov 15 '18 at 20:01
add a comment |
If you want to add borders inside your tables you have to style td and th elements:
table td, table th {
border: 1px solid black;
}
Or if you need to add only vertical line:
table td, table th { border-left:1px solid black; }
add a comment |
If you want to add borders inside your tables you have to style td and th elements:
table td, table th {
border: 1px solid black;
}
Or if you need to add only vertical line:
table td, table th { border-left:1px solid black; }
add a comment |
If you want to add borders inside your tables you have to style td and th elements:
table td, table th {
border: 1px solid black;
}
Or if you need to add only vertical line:
table td, table th { border-left:1px solid black; }
If you want to add borders inside your tables you have to style td and th elements:
table td, table th {
border: 1px solid black;
}
Or if you need to add only vertical line:
table td, table th { border-left:1px solid black; }
answered Nov 15 '18 at 20:25
Arturs MednisArturs Mednis
614
614
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53326824%2fhtml-inline-block-doesnt-work-for-just-one-table%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
share complete code, i think some of code is missing
– Naga Sai A
Nov 15 '18 at 19:44
Please post your full code so we can see the issue.
– Peter
Nov 15 '18 at 19:44
Just did, thank you guys
– Mauricio Sanabria Quesada
Nov 15 '18 at 20:05