<table border="1" style="background-color:yellow;border:1px dotted black;width:80%;border-collapse:collapse;">
<tr style="background-color:orange;color:white;">
<th style="padding:3px;">Table header</th><th style="padding:3px;">Table header</th>
</tr>
<tr>
<td style="padding:3px;">Table cell 1</td><td style="padding:3px;">Table cell 2</td>
</tr>
<tr>
<td style="padding:3px;">Table cell 3</td><td style="padding:3px;">Table cell 4</td>
</tr>
</table>
My question is how do i convert the inline CSS in this html example into an external style sheet?
would the css look like this?
tr {background-color:orange;color:white;}
table {background-color:yellow;border:1px dotted black;width:80%;border-collapse:collapse;}
td, th {padding:3px;}
Use table tr:first-child instead of tr as only the first row has inline styles:
table {
background-color: yellow;
border: 1px dotted black;
border-collapse: collapse;
width: 80%;
}
table th, table td {
padding: 3px;
}
table tr:first-child {
background-color: orange;
color: white;
}
http://jsfiddle.net/URBMh/2/
Related
I have wierd problem with my table,
As normal I want borders around my Table Heads and Table Cells,
But for some reason it only gives me a border around the whole table.
How can I fix this?
Images and code attached
How it looks
HTML;
<table width='100%'>
<tr>
<th>Maandag</th>
<th>Dinsdag</th>
<th>Woensdag</th>
<th>Donderdag</th>
<th>Vrijdag</th>
<th>Zaterdag</th>
<th>Zondag</th>
</tr>
<tr>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
</tr>
</table>
CSS;
table, th, td {
background-color: white;
border: solid black 3px;
}
The code you posted in your your question does put borders not only around the whole table, but also around every td and th.
I suppose you might not want the cells to have seperate borders. In this case you should apply the borders only to td and th (i.e. the cells) and in addition apply border-collapse: collapse; to the table itself:
table {
border-collapse: collapse;
}
th,
td {
background-color: white;
border: solid black 3px;
}
<table width='100%'>
<tr>
<th>Maandag</th>
<th>Dinsdag</th>
<th>Woensdag</th>
<th>Donderdag</th>
<th>Vrijdag</th>
<th>Zaterdag</th>
<th>Zondag</th>
</tr>
<tr>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
</tr>
</table>
The best way to approach this is to be careful with which CSS selectors you are using, and not use the table selector as a whole. For help with simple table values and alternatives, look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element#table_content.
thead { background-color: white; border: solid black 3px; }
th{ background-color: white; border: solid black 3px; }
td{ background-color: white; border: solid black 3px; }
#remi03
can you try these codes
original:
bu kodları bir denermisiniz.
.baslik th{
border: solid maroon 2px;
padding: 0;
}
.icerik td{
border: solid dodgerblue 2px;
padding: 0;
}
<table width='100%'>
<tr class="baslik">
<th>Maandag</th>
<th>Dinsdag</th>
<th>Woensdag</th>
<th>Donderdag</th>
<th>Vrijdag</th>
<th>Zaterdag</th>
<th>Zondag</th>
</tr>
<tr class="icerik">
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
<td>#</td>
</tr>
</table>
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 want to add border to my specific table's td and th so i did like :
table.borderedtable td, th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
<table class='borderedtable'>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
problem is the inside table also gets the border I want the border to be added only to td and th under the table with class. So i tried using direct child select > like below:
table.borderedtable>tr>td,>tr>th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
<table class='borderedtable'>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Now I dont get any border
The browser automatically inserts a <tbody> element inside tables, so the tbody is the direct descendent of your table, not tr.
For instance, to select the first td inside a table you would do this:
table.borderedtable>tbody>tr>td {
border: 1px solid black;
}
table.borderedtable>tbody>tr>td, table.borderedtable>thead>tr>th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
Html is not my specialty :)
I have an Html table and I want to have a solid line between each row. I've done it by defining a border-bottom on each <td> tag, like so:
<td style="border-bottom: 1px solid #0066ff;">[content]</td>
But it comes out with a one-pixel gap in the line, as seen below:
I tried putting the border-bottom in the <tr> tag, but that didn't work at all. What's the correct way to do this?
You may use the CSS attribute border-collapse and set it to collapse:
table
{
border-collapse: collapse;
}
td
{
border-bottom: solid 1px black;
}
<table>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
<tr>
<td>Test</td>
<td>Test 2</td>
</tr>
</table>
Try this.
table {
border-collapse: collapse;
}
td {
padding: 10px 0;
}
tr {
border-bottom: 1px solid #0066ff;
}
Give cellspacing 0 to the table
<table cellspacing="0">
<tr>
<td style="border-bottom: solid 1px;">sdfa</td>
<td style="border-bottom: solid 1px;">asfsaf</td>
</tr>
</table>
Example: JSFiddle
I have the following sample table:
<table>
<thead>
<tr>
<th>t1</th>
<th>t2</th>
<th>t3</th>
<th>t4</th>
<th>t5</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">Colspan=5 here</td>
</tr>
</tbody>
</table>
And here is the simple CSS code:
table {
border-collapse: collapse;
border-spacing: 0;
}
th, td {
border: 1px solid #000;
}
The weird thing is the bottom border after first th disappeared, here is a screenshot:
When I switch to another window and switch back to IE, the table refresh as normal. For the convenient, I create a jsFiddle: http://jsfiddle.net/hulufei/3dxt2/9/
This effect IE10, 9, 8. Is there a fix for this bug in IE?
Change the style code as this seems solve the problem:
table {
border-collapse: collapse;
border-spacing: 0;
border-top:1px solid #000;
border-left:1px solid #000;
}
th, td {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
<table>
<thead>
<tr>
<th>t1</th>
<th>t2</th>
<th>t3</th>
<th>t4</th>
<th>t5</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5">Colspan=5 here</td>
</tr>
</tbody>