I have this simple html code. I am simply trying to format the colors but none of the CSS is actually formatting it.
I've tried changing the variables names, changing the table class to id and vice-versa.
<head>
<style>
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table tr:first-child td {
font-size: 30px;
background-color: red;
color: green;
}
#cell-style {
font-size: 8px;
text-align: left;
}
</style>
</head>
<html>
<body>
<table class="cool-table">
<tr>
<th id="cell-style">Fruit</th>
<th id="cell-style">Price</th>
</tr>
<tr>
<th id="cell-style">Apples</th>
<th id="cell-style">$10</th>
</tr>
<tr>
<th id="cell-style">Banana</th>
<th id="cell-style">$50</th>
</tr>
<tr>
<th id="cell-style">Mango</th>
<th id="cell-style">$20</th>
</tr>
</table>
</body>
</html>
It should show the entire table background as blue and the text should be purple. The first row's text should be large with a red background and green text. The rest of the cells should have a blue background with purple text and size 8px font.
Change your header cells to th and the normal cells to td. That way you do not need a id, class or tr:first-child to separate the header row from the rest. Note that if you use id, you should only use it on a single HTML tag. For multiple tags use class instead.
<html>
<head>
<style>
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table th { /* Changed to th, no need for tr:first-child */
font-size: 30px;
background-color: red;
color: green;
}
.cool-table td { /* Styling td-tags (table cells) */
font-size: 8px;
text-align: left;
}
</style>
</head>
<body>
<table class="cool-table">
<tr>
<th>Fruit</th> <!-- Keep as th -->
<th>Price</th>
</tr>
<tr>
<td>Apples</td> <!-- Changed to td -->
<td>$10</td>
</tr>
<tr>
<td>Banana</td>
<td>$50</td>
</tr>
<tr>
<td>Mango</td>
<td>$20</td>
</tr>
</table>
</body>
</html>
You can simply do it this way :
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table tr:first-child {
background-color: red;
color: green !important;
}
.cool-table tr:not(:first-child) {
font-size: 8px;
text-align: left;
}
<table class="cool-table">
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
<tr>
<th>Apples</th>
<th>$10</th>
</tr>
<tr>
<th>Banana</th>
<th>$50</th>
</tr>
<tr>
<th>Mango</th>
<th>$20</th>
</tr>
</table>
The first-child has a red background and green color, and everything that is NOT the first child gets a font-size of 8 and is aligned to the left.
There are several issues to look at.
style tag belongs in head tag which belongs in the html tag.
You can't use multiple ids in the same document - they're supposed to be unique. Try using a class like below.
the second css block doesn't do anything. Maybe you want to remove the td from the selector like below?
Several of your styles are not being applied because they override each other. Try making the selectors more specific to give them higher precedence.
You really want to understand the structure of html documents. You can verify them using the w3 validator
You can also learn more about CSS from Mozilla.
<!doctype html>
<html><head>
<style>
.cool-table {
width: 500px;
border: 1px solid #000;
background-color: blue;
color: purple;
}
.cool-table tr:first-child { /* removed 'td' */
font-size: 30px;
background-color: red;
color: green;
}
.cell-style { /* changed to class */
font-size: 8px;
text-align: left;
color: yellow;
}
</style>
</head><body>
<table class="cool-table">
<tr>
<th class="cell-style">Fruit</th>
<th class="cell-style">Price</th>
</tr>
<tr>
<th class="cell-style">Apples</th>
<th class="cell-style">$10</th>
</tr>
<tr>
<th class="cell-style">Banana</th>
<th class="cell-style">$50</th>
</tr>
<tr>
<th class="cell-style">Mango</th>
<th class="cell-style">$20</th>
</tr>
</table>
</body>
</html>
Related
I am trying to achieve this table look
How can I make the first heading to fill the entire width? Something like flex: 1 would do. Also, how can I add border to only elements in the table like on the picture, instead of entire table?
.center {
text-align: center;
}
table {
border: 1px solid black;
}
<table style="width:100%">
<tr>
<th style="text-align:left">Month</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
</tr>
<tr>
<td>January</td>
<td class="center">$100</td>
</tr>
<tr>
<td>February</td>
<td class="center">$80</td>
</tr>
</table>
I need this to look like
Image
You can do like below:
.center {
text-align: center;
}
td,
th {
padding: 3px 5px; /* control the spacing */
}
table {
border-collapse: collapse; /* this is mandatory to correctly use border */
border-bottom: 1px solid black; /* only border bottom here */
}
th:first-child {
width: 100%; /* take as much space as possible */
}
tr:nth-child(2) {
border-top: 1px solid black; /* border top to second tr */
}
tr:not(:first-child) {
/* right and left to all except the first one */
border-left: 1px solid black;
border-right: 1px solid black;
}
<table style="width:100%">
<tr>
<th style="text-align:left">Month</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
</tr>
<tr>
<td>January</td>
<td class="center">$100</td>
</tr>
<tr>
<td>February</td>
<td class="center">$80</td>
</tr>
</table>
For styling the first raw(table header) there are many solutions fastest one by selecting table first raw
table tr:first-child{
border: 1px solid black;
}
I recommend you to read this article first: A Complete Guide to the Table Element
Current HTML:
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Desired:
Question:
How can I add borders and width to my current HTML with CSS as the desired outcome?
What I have tried
I have tried the following css:
table {
border: 1px solid black;
}
This just puts a border around the table. How can I add it same as desired too?
table {
border-collapse: collapse;
/* if you don't add this line you will see "double" borders */
border: 1px solid black;
width: 100vw;
}
th{
color: white;
background-color: blue;
}
td{
background-color: white;
width: 70%;
}
td, th {
border: 1px solid black;
}
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Heres, your snippet!
simply this:
table {
border-collapse: collapse; /* if you don't add this line you will see "double" borders */
border: 1px solid black;
}
table th,
table td {
text-align: left;
border: 1px solid black;
}
demo here https://jsfiddle.net/3hpks1mL/
hope it help you
section {
width:100wh;
}
table{
width:100%
}
<section class="Product-Info">
<table border="1">
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<td>Product Name:</td>
<td >Name</td>
</tr>
<tr>
<td > Product Description:</td>
<td >Description</td>
</tr>
</table>
</section>
Fairly easy, in your example you just have to apply the desired background colour to the table header cells (th), like so:
th {
background: darkblue;
color: white; /* Assuming you don't want black text on dark blue. */
}
For the standard border around the table cells to disappear you have to simply collapse the border on the main table element, like so:
table {
border-collapse: collapse;
}
With that set you can now apply any border styling you want to your table, in any thickness, colour and style you want.
I'd go with the following:
table, th, td {
border: 1px solid black;
}
.Product-Info > table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
}
.Product-Info tr > *:first-child {
background: blue;
color: white;
text-align: left;
}
.w-25 {
width: 25% !important;
max-width: 25% !important;
}
.text-center {
text-align: center !important;
}
<section class="Product-Info">
<table>
<colgroup>
<col class="w-25 blue">
<col class="">
</colgroup>
<tr>
<th colspan="2" class="text-center">Product Infromation</th>
</tr>
<tr>
<th class="text-left">Product Name:</th>
<td class="text-center">Name</td>
</tr>
<tr>
<th class="text-left">Product Description:</th>
<td class="text-center">Description</td>
</tr>
</table>
</section>
Extra information (The "copy-paste" snippet under #Random-COSMOS answer).
Table is block-level element
"A block-level element always starts on a new line and takes up the
full width available. https://www.w3schools.com/html/html_blocks.asp"
Set any width you want to the table (400px or 30%) ==> 100% in your case (100% of its parent).
<table style="width: 100%;">
To specify table borders in CSS, use the border property.
table, th, td {
border: 1px solid black;
}
Out of topic - Accessible tables
For Web Accessibility => Add relationship between header and data cells (scope="row" / scope="col").
Full article: https://www.w3.org/WAI/tutorials/tables/two-headers/
<table>
<tr>
<th scope="col" colspan="2">Product Infromation</th>
</tr>
<tr>
<th scope="row">Product Name:</th>
<td>Some Name</td>
</tr>
<tr>
<th scope="row">Product Description:</th>
<td>Some Description</td>
</tr>
</table>
I have been trying to work out getting a similar table to a picture that I have been studied from. Which looks like:
However I have been getting something similar:
This is what I have done:
However im getting issues when it comes to:
Underscore line under the bold text, Which I managed to only get on a small text which I wish to get in the whole line
Also I want to adjust the Size of the table so it gets stuck like in the first picture. I don't know if I did the correct way now but I assume iam on the correct way. Maybe someone here can help me out seeing the issue.
table {
border: 1px solid black;
background-color: #ffcc99;
}
tr.hello {
background-color: #000000;
color: #ffffff;
}
tr.bigtext {
font-weight: bold;
}
</style>
</head>
<body>
<h5>Tabell 2</h5>
<table style="width:100%">
<tr class="bigtext">
<td><u>Studenter</u></td>
<td><u>17000</u></td>
</tr>
<tr>
<td>Högskoleingejör</td>
<td>2800</td>
</tr>
<tr>
<td>Ekonomi</td>
<td>1800</td>
</tr>
<tr>
<td>Fristående kurser</td>
<td>8300</td>
</tr>
<tr class="hello">
<td>Cirka 600 utländska studenter ingår i det totaala antalet studenter</td>
</tr>
</table>
</body>
</html>
You have done all almost correct, except you should:
not underline the border stuff.
not use <u> tags.
use the colspan for the full width.
And your code seems to be incomplete. Here's your updated code:
table {
border: 1px solid black;
background-color: #ffcc99;
}
tr.hello {
background-color: #000000;
color: #ffffff;
}
tr.bigtext td {
font-weight: bold;
border-bottom: 1px solid #000;
}
<h5>Tabell 2</h5>
<table style="width:100%">
<tr class="bigtext">
<td>Studenter</td>
<td>17000</td>
</tr>
<tr>
<td>Högskoleingejör</td>
<td>2800</td>
</tr>
<tr>
<td>Ekonomi</td>
<td>1800</td>
</tr>
<tr>
<td>Fristående kurser</td>
<td>8300</td>
</tr>
<tr class="hello">
<td colspan="2">Cirka 600 utländska studenter ingår i det totaala antalet studenter</td>
</tr>
</table>
Preview
This is how I did it. I added the following under the bigtext tr class:
<tr class="underline">
<td class="underline" colspan="2"></td>
</tr>
and I added the following CSS to fix the fonts and the underline:
.underline {
border-top: solid 1px black;
}
tr:not(.bigtext) td:first-child{
font-family: Papyrus, fantasy;
}
tr:not(.bigtext) td:not(first-child){
font-family: Georgia;
}
tr.bigtext td:not(first-child){
font-family: Georgia;
}
The table width has also been adjusted. So the in-line CSS style was removed and this was added to your table css:
width: 70%;
Here is the JSFiddle demo
How can I add a white space around the background color of a table cell in CSS? I have this, but the background color goes all the way to the edge. Padding seems to work for the content, but not the background color.
#main-monitor {
width: 100%;
}
#main-monitor td, #main-monitor th {
border: 3px solid #999;
padding: 4px;
}
EDIT: Here's my full CSS that matters to these pieces. I've made a couple updates, but am still having the same issue.
#main-monitor {
width: 100%;
}
#main-monitor th {
border: 3px solid #999;
padding: 3px;
text-align: center;
padding-top: 12px;
padding-bottom: 12px;
}
#main-monitor td {
background-color: white;
border: 3px solid #999;
margin: 2px;
}
#main-monitor td span {
margin: 5px;
}
It's being applied to a table in this partial view:
<table id="main-monitor">
<thead>
<tr>
<th>
#Html.DisplayNameFor(m => m.Name)
</th>
<th>
#Html.DisplayNameFor(m => m.A)
</th>
<th>
#Html.DisplayNameFor(m => m.B)
</th>
<th>
#Html.DisplayNameFor(m => m.C)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.Name</td>
<td style="background-color:#item.AColor"><span>#item.A</span></td>
<td style="background-color:#item.BColor"><span>#item.B</span></td>
<td style="background-color:#item.CColor">#item.C</td>
</tr>
}
</tbody>
</table>
Solution 1
As mentioned by "Advait S", You can use the border-spacing css rule for table tags
Here is a practical example
td {
background: red;
}
table {
border-spacing: 10px;
}
<table>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
</table>
Solution 2
Despite solution 1 is elegant. you can change the display property to your table cell to inline-block and then apply a margin to your cells
snippet below
td{
background:red;
margin:10px;
display:inline-block;
}
<table>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
<tr>
<td><span>xxx</span></td>
<td><span>xxx</span></td>
</tr>
</table>
You can also try this.
Write the text of table in span and apply style as.
HTML
<table>
<tr>
<td><span>Hello</span></td>
</tr>
</table>
CSS
td{
border: 1px Solid Black;
background-color: white;
}
td span{
background-color: blue;
margin: 5px;
}
See this
*Note, this question has basically been overhauled from a previous version so as to be more precise. Thus some of the answers below do not completely the restructed question.
I have two sets of data which I need to display tabulated. As both sets of data need to have the column widths (but still be dynamic), I am using two <tbody>'s.
I am trying to set a heading for each of the tabulated data, in a way that the heading takes up the width of the entire <tbody>.
I have tried using table-caption, but it does not apply to the tbody, but the table itself. Meaning all captions look to go to the top of the table, regardless of where they are in the html.
To demonstrate what I am running into, see the following snippet:
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
tbody:before {
display: table-caption;
font-size: 1.25em;
padding: 16px;
background-color: #303030;
font-weight: bold;
color: white;
width: 100%;
}
#tbody1:before {
content: 'tbody1';
}
#tbody2:before {
content: 'tbody2';
}
th,
td {
padding: 4px 0px;
border: 1px solid black;
}
caption {
border: 1px dotted black;
}
<table>
<tbody id="tbody1">
<caption>Caption1</caption>
<tr>
<th>bob</th>
<th>dob</th>
</tr>
</tbody>
<tbody id="tbody2">
<caption>Caption2</caption>
<tr>
<th>dob</th>
<th>bob</th>
</tr>
</tbody>
</table>
My current attempt is to use :before. But as you can see, the :before does not take up the entire width of the tbody. Even with width: 100% it does not work.
Another way I realized it could be done is to have another row for each tbody, and set colspan to equal the amount of columns for that table. Like this:
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
th,
td {
padding: 4px 0px;
border: 1px solid black;
}
caption {
border: 1px dotted black;
}
<table>
<tbody id="tbody1">
<tr>
<th colspan="2">Title1</th>
</tr>
<tr>
<th>bob</th>
<th>dob</th>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<th colspan="2">Title2</th>
</tr>
<tr>
<th>dob</th>
<th>bob</th>
</tr>
</tbody>
</table>
However, the only problem there is that it does not become dynamic and requires you to know how many columns there will be ahead of time. Normally this would not be a problem but I am looking for a more dynamic solution in my case.
My question is: How does one add a caption to a tbody (not the table) in a way so that each caption relates to the applicable tbody and not the table
You just need to set the width to 100vw. This sets the width to 100% of the viewport width. For a more in-depth explanation of viewport width, see this article.
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
#tbody1:before, #tbody2:before {
display: table-caption;
font-size: 1.25em;
padding: 16px;
background-color: #303030;
font-weight: bold;
color: white;
width: 100vw;
}
#tbody1:before {
content: 'tbody1';
}
#tbody2:before {
content: 'tbody2';
}
th, td {
padding: 4px 0px;
border: 1px solid black;
}
<table>
<tbody id="tbody1">
<tr>
<th>bob</th>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<th>dob</th>
</tr>
</tbody>
</table>