How to create table with simple border in HTML 5 - html

What is the easiest way to get such table as bellow in HTML 5. I have a feeling that my solution (with setting style for every td) is not the best way.
<table style="border-collapse: collapse; border: 1px solid;">
<tr>
<td style="border: 1px solid;">1</td>
<td style="border: 1px solid;">2</td>
</tr>
<tr>
<td style="border: 1px solid;">3</td>
<td style="border: 1px solid;">4</td>
</tr>
</table>


What you are trying to do is best accomplished by using an internal CSS stylesheet, rather than using inline styles on your table elements. Following is an example of how you can use a CSS stylesheet to style your table.
First, give the table an id like this:
<table id="thetable" border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Then use CSS on the table:
#thetable {
border-collapse: collapse;
border: 1px solid;
}
#thetable td {
border: 1px solid;
}
The entire HTML document would look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Table Page</title>
<style>
#thetable {
border-collapse: collapse;
border: 1px solid;
}
#thetable td {
border: 1px solid;
}
</style>
</head>
<body>
<table id="thetable" border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
Here is a tutorial on how to get the CSS into your HTML using a stylesheet. Good luck!


Use CSS classes.
table.MyClass {
/* Whatever table styles here */
border-collapse: collapse;
border: 1px solid;
}
table.MyClass td {
/* Whatever cell styles within the table here */
border: 1px solid;
}
<table class="MyClass">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>


Externalise the CSS to a separate stylesheet.
table {
border-collapse: collapse;
border: 1px solid;
}
td {
border: 1px solid red;
}
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

Related

HTML table tr with no borders

I need to create an invoice with HTML table, td, tr.
I need something like this
that every item in the invoice is in a new row, but a row without border.
I have tried to add a class for tr element
border: 0px solid black;
but it is not working properly. Can you advise please?
In this snippet is created a table, but there are borders everywhere
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>

Use Border style in CSS like below to remove Border of <tr> <td> in Table.
border-right:none;
border-left:none;
border-bottom:none;
border-top:none
Is it solved ?

Set border for table but for cells you have to specify a custom class to each cell according to its position. I suggest 4 kinds of borders on top, right,bootm and left. Also do not forget to set border-collapse for table to collapse TD borders on each others:
table {
border:1px solid #000000;
border-collapse:collapse;
}
td{
padding:10px;
}
.tB{
border-top:1px solid #000000
}
.rB{
border-right:1px solid #000000
}
.bB{
border-bottom:1px solid #000000
}
.lB{
border-left:1px solid #000000
}
<table>
<tr>
<td class="rB">test</td>
<td class="bB">test</td>
</tr>
<tr>
<td class="rB bB">test</td>
<td class="bB">test</td>
</tr>
</table>

You can use a specific class with style property border:0 to remove the borders form individual row.
Find the solution (on top of your snippet) below:-
tr.noBorder td {
border: 0;
}
tr.noBorder td:first-child {
border-right: 1px solid;
}
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr class="noBorder">
<td>January</td>
<td>$100</td>
</tr>
<tr class="noBorder">
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>

make one table look like two tables

I have a table that is controlled by a style sheet.
the table has been created from a poster which my boss wants it to look like. the problem i am having is on the poster there is a gap between two of the columns.
I have tried just putting two tables side by side however this caused me issues if viewed on a mobile devise, so i tried to add a column that had a border left and right and the same colour background as the rest of the page but i cant get rid of the top/bottom borders that are in place from the style sheet.
Style sheet.
.table__container {
overflow-x: scroll;
height: 100%;
width: 100%;
}
table {
border-collapse: collapse;
}
tr {
border-bottom: 0px dashed #DDD;
}
table tr th {
color: #88B53D;
}
table tr th, table tr td {
vertical-align: top;
}
.row__header {
border-top: 3px solid #DDD;
}
.row__header--day {
font-size: 1em;
text-transform: uppercase;
}
CSS on page
.nothing {
border-left: 1px solid #DDD;
border-right: 1px solid #DDD;
border-top: 0px;
border-bottom: 0px;
background-color: #eee;
}
HTML table
<div class="table__container">
<table width="100%">
<tr>
<th></th>
<th></th>
<th></th>
<td class="nothing">Gap should be here</td>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr class="row__header" style="text-align:center;">
<th class="row__header--day"></th>
<td></td>
<td></td>
<td class="nothing">Gap should be here</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
The style sheet was provided to me as part of our branding so i cant mess with it too much.

Is this the expected result? If yes then I will add some explanation.
.table__container {
height: 100%;
width: 100%;
}
table tr td.gap{
width:40%;
text-align:center;
border:none;
}
table tr td{
border:1px solid #000
}
<div class="table__container">
<table width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="gap"></td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td class="gap"></td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</div>

How to get a solid line between each row in a table?

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

Change TD border color with HTML or CSS

I have a little trouble with changing one tr border color
My table is something like this
<table>
<div id="one">
<tr>
<td></td>
<td></td>
</tr>
</div>
<div id="two">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</div>
</table>
I would like first <tr><td></td><td></td></tr> to be white and the second one to be blue
I have tried with
#one td, #one tr,#onetable{
border: 1px solid white;
border-color:#ff0000;
But it didn't work

<style type="text/css">
table {
border-collapse: collapse;
}
#one td {
border: 1px solid #ff0000;
}
</style>
<table>
<tr id="one">
<td></td>
<td></td>
</tr>
<tr id="two">
<td></td>
<td></td>
</tr>
</table>

<style type="text/css">
#one td {
border: 1px solid #ff0000;
}
</style>
<table>
<tr id="one">
<td></td>
<td></td>
</tr>
<tr id="two">
<td></td>
<td></td>
</tr>
</table>
http://jsfiddle.net/VCA9Q/

Here you go
<html>
<head>
<style>
body {background-color: beige;}
table {border-collapse: separate;}
table td { width: 50px; height: 50px;}
table tr:first-child td {border: 1px solid #fff; }
table tr:last-child td {border: 1px solid #0000FF; }
</style>
</head>
<body>
<table>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
</body>
</html>
and a fiddle
(btw #0000FF is blue)

If you want to zebra-stripe your table:
table td {
border-width: 1px;
border-style: solid;
}
table tr:nth-child(odd) td {
border-color: #fff;
}
table tr:nth-child(odd) td {
border-color: #00f;
}
JS Fiddle demo.
Note that, if you want two cells in the first row, and three in the second, you should use the colspan attribute in your HTML (on either the first, or, as in the demo below, the second td element):
<table>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
JS Fiddle demo.
References:
:nth-child() browser-compatibility.
CSS :nth-child() pseudo-class.

CSS
table{
background:#000;
}
tr#one{
background:blue;
}
tr#two{
background:red;
}
tr td{
background: inherit;
}
HTML
<body>
<table>
<tr id='one'>
<td>1</td>
<td>2</td>
</tr>
<tr id='two'>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>

Set same width two tables

I have two tables that show data from database.
Now I set 1st table for headlines and 2nd table for the data.
I set like this
<table class="t_status">
<td>No</td>
<td>Name</td>
<td>Address</td>
</table>
In table #2
<table class="t_status">
<td>1</td>
<td>Michael</td>
<td>California</td>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
Now facing the problem when data display, table 1 and table 2 set different width.
This is the CSS
table
{
empty-cells: show;
border-collapse: collapse;
width: 100%;
}
.t_status
{
border-collapse: collapse;
background: #fff;
border: 1px solid #d9d9d9;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
width: 100%;
margin-top: -1px;
}
.t_status td, th
{
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
padding: 10px;
font-size: 40pt;
font-weight: bold;
}
.t_status td
{
color: #fff;
background-color: #000;
}
.t_status th
{
font-size: 40pt;
color: #fff;
}

Try to put them like this:
<table class="t_status">
<tr>
<td>No</td>
<td>Name</td>
<td>Address</td>
</tr>
</table>
and
<table class="t_status">
<tr>
<td>1</td>
<td>Michael</td>
<td>California</td>
</tr>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
</tr>
</table>

if am correct you are using two tables for scrolling effect of head and data, so you will get table header for all the data.
to achieve this effect you can try using jquery table jtable
sample code

Your html syntax is incorrect. Use tr tags:-
<table class="t_status">
<tr>
<td>No</td>
<td>Name</td>
<td>Address</td>
</tr>
</table>

You should put all information into one table, thus you can assure that the rows have the same width.
<table class="t_status">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Michael</td>
<td>California</td>
</tr>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
</tr>
</tbody>
</table>
<thead></thead> and <tbody></tbody> are not necessary.

It seems that you have forgot the <tr> tags. By the way, if you want to preserve your markup (correct or not, but two different tables), you can try with nth selectors and give a fixed width to each cell:
.t_status td:nth-child(1) {
width:2em;
}
.t_status td:nth-child(2) {
width:5em;
}
.t_status td:nth-child(3) {
width:5em;
}
Here's a working example.