I want to make a table in html like given in the link Table
I have tried but didnt work.
MY CODE
.td1 {
background-color: #cccccc;
border: 2px solid black;
padding: 10px;
padding-bottom: 50px;
}
.td2 {
background-color: red;
border: 2px solid black;
padding: 10px;
}
.td3 {
background-color: green;
border: 2px solid black;
padding: 10px;
padding-bottom: 200px;
}
.td4 {
background-color: blue;
border: 2px solid black;
padding: 10px;
}
.td5 {
margin: 5px;
background-color: yellow;
border: 2px solid black;
padding: 10px;
}
.table {
border-collapse: separate;
border-spacing: 25px 5px;
margin: 5px;
border: 2px solid black;
}
<table width="100%" class="table">
<tr><td colspan="3" class="td1" align="center"> <b>DIV1</b>
</td></tr>
<tr><td class="td2" align="center" rowspan="3"><b>DIV2</b></td>
<td></td><td></td></tr>
<tr><td class="td3" align="center" rowspan="2"><b>DIV3</b></td>
<td></td></tr>
<tr><td class="td4" align="center"><b>DIV4</b></td></tr>
<tr><td colspan="3" class="td5" align="center"><b>DIV5</b>
</td></tr>
</table>
add this in your css
.table tr{
height:100px;
}
http://jsfiddle.net/uwokm8oq/1/
You can remove the "rowspan"-attribute, you already have a div inside your tds.
Give the 2nd tr a height in the css and to the three divs in the tds inside, add a height-attribute.
Have noticed that you have:
border-spacing: 25px 5px;
Change it to:
border-spacing: 5px 5px;
This spacing is for the distance between the borders of the cells.
Here you can read more about border-spacing!
Related
I would like a table such that I have multiple rows, but no inner-vertical lines. That implies a complete border around the table, but no inner-column borders. Specifically, I would want the ability to have that, but with spacing around each row and curved edges, as shown in this example code: https://jsfiddle.net/n14ye7nk/
body {
font-family: sans-serif;
}
#table {
border-spacing: 0.3em;
}
#table td {
border: 2px solid #30c;
border-radius: 0.4em;
padding: 1em;
text-align: center;
}
Unfortunately tables aren't really designed to do what you are asking.
In order to have the border around the row rather than the cell, simply shift the border rule to the #table tr selector, and also add border-collapse: collapse to the <table> element itself.
body {
font-family: sans-serif;
}
#table {
border-collapse: collapse;
border-spacing: 0.3em;
}
#table tr {
border: 2px solid blue;
}
#table td {
padding: 1em;
text-align: center;
}
<table id="table">
<tbody>
<tr>
<td>this</td>
<td>is</td>
<td>a table</td>
</tr>
<tr>
<td>with</td>
<td>rounded</td>
<td>cells</td>
</tr>
</tbody>
</table>
Table row spacing can be done with border-collapse: separate... though this doesn't allow for the border.
Note that neither approach will allow border-radius to be applied to tr. The best way of doing this is to simply set individual corner radii on the <td> element :first-child and :last-child. Note that you'll want cellspacing="0" on the <table> itself.
body {
font-family: sans-serif;
}
#table td {
padding: 1em;
text-align: center;
}
#table tr:first-of-type td {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
#table tr:last-of-type td {
border-bottom: 2px solid blue;
}
#table tr:first-child td:first-child {
border-left: 2px solid blue;
border-top-left-radius: 10px;
}
#table tr:first-child td:last-child {
border-right: 2px solid blue;
border-top-right-radius: 10px;
}
#table tr:last-child td:first-child {
border-left: 2px solid blue;
border-bottom-left-radius: 10px;
}
#table tr:last-child td:last-child {
border-right: 2px solid blue;
border-bottom-right-radius: 10px;
}
<table id="table" cellspacing="0">
<tbody>
<tr>
<td>this</td>
<td>is</td>
<td>a table</td>
</tr>
<tr>
<td>with</td>
<td>rounded</td>
<td>cells</td>
</tr>
</tbody>
</table>
Again, this is not ideal.
The best way of handling this really is by completing replacing the table with <div> elements instead. This way you can make use of calc() in the width to ensure even spacing, float: left to control how many elements are in a row, and margin-bottom to add whitespace in between the rows. You also only have to apply the core border-radius on the .row itself:
.row {
font-family: sans-serif;
border: 2px solid blue;
border-radius: 10px;
}
.row div {
display: inline-block;
text-align: center;
padding: 1em;
width: calc(100% / 3 - (3px + 2em));
}
.row:first-of-type {
margin-bottom: 20px;
}
<div class="row">
<div>this</div>
<div>is</div>
<div>a table</div>
</div>
<div class="row">
<div>with</div>
<div>rounded</div>
<div>cells</div>
</div>
I would like to have some spacing between border-bottom, as it is on second picture. if I add padding-left, only text and checkbox will move to right. border-bottom stays the same.
form td.caption {
font-weight: bold;
border-bottom: 1px solid #d3d3d3;
padding-top: 1em;
}
My code gives me this:
Style I want to achieve:
table td.caption {
font-weight: bold;
border-bottom: 1px solid #d3d3d3;
padding-top: 1em;
min-width:100px;
}
table {
border-spacing: 10px;
border-collapse: separate;
}
<table>
<tr><td class="caption">test</td><td class="caption">2</td></tr>
<tr><td></td><td></td></tr>
</table>
table td.caption {
border-bottom: 1px solid #d3d3d3;
padding-top: 1em;
width:150px;
font-size:12px;
}
table {
border-spacing: 7px;
border-collapse: separate;
}
<table>
<tr>
<td class="caption">Select Chapters</td>
<td class="caption" align="center"><input type="checkbox"></td>
</tr>
</table>
Is this the same that you are looking for?
Hope this helps.
I have a simple table with styles applied via inline CSS, and it is working. But when I try to add the CSS to the document via the element, it doesn't work in Chrome. I checked the W3Schools CSS tutorials, but couldn't find a solution.
My code is this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
tr {
border: solid 1px black;
padding-left: 7px;
padding-right: 7px;
}
</style>
</head>
<body>
<table id="t01" style="border: 1px solid black; background-color: #E4E5E0; margin-left: 40px;">
<tr style="border: 1px solid black;">
<th>Available<br>On</th>
<th>Ids</th>
</tr>
<tr>
<td style="border: solid 1px black; padding-left: 7px; padding-right: 7px;"><b>Phone</b></td>
<td style="border: solid 1px black; padding-left: 7px; padding-right: 7px;"><b>9999999
</td>
</tr>
</table>
<br><br>
<table id="t01" style="border: 1px solid black; background-color: #E4E5E0; margin-left: 40px;">
<tr style="border: 1px solid black;">
<th style="border: solid 1px black; padding-left: 7px; padding-right: 7px;">Available<br>On</th>
<th style="border: solid 1px black; padding-left: 7px; padding-right: 7px;">Ids</th>
</tr>
<tr>
<td style="border: solid 1px black; padding-left: 7px; padding-right: 7px;"><b>Phone</b></td>
<td style="border: solid 1px black; padding-left: 7px; padding-right: 7px;"><b>9999999
</td>
</tr>
</table>
</body>
</html>
https://www.w3schools.com/code/tryit.asp?filename=FIDUIS25NER6
Out put:
Change your CSS to the following. It has a typo.
<style>
th {
border: 1px solid black;
padding-left: 7px;
padding-right: 7px;
}
</style>
If you want to add border to tr visit this link.
Change this:
border: solid 1px black;
to this:
border: 1px solid black;
<style type="text/css">
th {
border: solid 1px black;
padding-left: 7px;
padding-right: 7px;
}
</style>
Actually in your code your are giving border to tr which does not make sense click here to know more.
So replace tr to th in your above code and it work.
I tried to add a horizontal line inside a <td> tag to achieve :
but this is what I got :
Here is a jsfiddle: http://jsfiddle.net/6qybn8w8/
Please note that I want this <hr /> tag to appear in only few of the <td> and not all. Also, I cannot remove the padding for <td> as I need it to format content of other <td>s
You can do some thing like this.
table {
border: 3px solid #0D94D2;
}
table th,
td {
padding: 4px 10px 4px 5px;
font-size: 12px;
}
table th {
background-color: #0D94D2;
text-align: center;
padding: 0.25em 0.25em;
white-space: nowrap;
}
table td {
width: auto;
text-align: center;
border-bottom: 1px solid #B1DCEA;
white-space: nowrap;
}
hr {
position: relative;
color: #0000FF;
background-color: #0000FF;
height: 0.75em;
width: 118.9%;
left: -6.5%;
}
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
One workaround for you to get the expected result without breaking your structure is by using positioning.
Well I've updated the fiddle so you can go through the changes, http://jsfiddle.net/6qybn8w8/2/
HTML:
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
CSS
table{
border:3px solid #0D94D2;
}
table th,td{
padding: 4px 10px 4px 5px; font-size: 12px;
}
table th{
background-color:#0D94D2;text-align:center;padding:0.25em 0.25em;white-space:nowrap;
}
table td{
width:auto;text-align:center;border-bottom: 1px solid #B1DCEA;white-space:nowrap;position:relative;
}
table td div{
margin-top:10px;
}
hr{
color: #0000FF;
background-color: #0000FF;
height: 0.75em;
position:absolute;
width:100%;
top:-10px;
left:-1px;
}
Set the height of <hr> as 0 and add margin-top to 5px or whatever that you want.
table{
border:3px solid #0D94D2;
}
table th,td{
padding: 4px 10px 4px 5px; font-size: 12px;
}
table th{
background-color:#0D94D2;text-align:center;padding:0.25em 0.25em;white-space:nowrap;
}
table td{
width:auto;text-align:center;border-bottom: 1px solid #B1DCEA;white-space:nowrap;
}
hr{
height: 0em;
border-top: 5px solid green;
margin: 0;
width: 100%;
}
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
Updated jsFiddle: http://jsfiddle.net/rdesai/6qybn8w8/5/
I would like to put CSS buttons into several tables. Ideally, each button should fill the corresponding table cell. This presents a problem because if I hard-code the button width in CSS, I would need a separate class for each table dimension.
Is there a way to have the buttons fit into the table cells?
HTML:
<center>
<table border="1" width="90%" class="buttons">
<tr>
<td width="25%">Link1 goes here</td>
<td width="25%">Link2<br>goes<br>here</td>
<td width="25%">Link3<br>goes<br>here</td>
<td width="25%">Link4<br>goes<br>here</td>
</tr>
</table>
<p>
<table border="1" width="90%" class="buttons">
<tr>
<td width="20%">Link1 goes here</td>
<td width="20%">Link2<br>goes<br>here</td>
<td width="20%">Link3<br>goes<br>here</td>
<td width="20%">Link4<br>goes<br>here</td>
<td width="20%">Link5<br>goes<br>here</td>
</table>
</center>
CSS:
.buttons
{
overflow:auto;
text-align: center;
font-size: 1.0em;
font-weight: bold;
line-height: 200%;
}
.buttons a
{
display: inline-block;
width: 18em;
height: 6em;
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
clear:right;
float:right;
}
.buttons a:active
{
box-shadow: 1px 1px 0px #888888;
}
Play with the code:
http://codepen.io/anon/pen/bIEtC
You should try to set height and width 100%. Like this:
.buttons a
{
display: inline-block;
width: 100%; /* set to 100% */
height: 100%; /* set to 100% */
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
clear:right;
float:right;
}
Try not to hard code CSS into the HTML... it leads to a mess of trouble!
Taking the inline styling out of the html seems to fix most problems. Then, just like #ArmanVirdi said, add the width and the height of the link to be 100%.
The <center> tags don't seem to be doing anything, so those are removed in the below HTML, as well as an unclosed <p> tag.
HTML
<table class="buttons width-25">
<tr>
<td>Link1 goes here
</td>
<td>Link2<br>goes<br>here
</td>
<td>Link3<br>goes<br>here
</td>
<td>Link4<br>goes<br>here
</td>
</tr>
</table>
<table class="buttons width-20">
<tr>
<td>Link1 goes here
</td>
<td>Link2<br>goes<br>here
</td>
<td>Link3<br>goes<br>here
</td>
<td>Link4<br>goes<br>here
</td>
<td>Link5<br>goes<br>here
</td>
</table>
CSS
table {
width: 100%;
}
.width-20 td {
width: 20%;
}
.width-25 td {
width: 25%;
}
.buttons {
text-align: center;
font-size: 1.0em;
font-weight: bold;
line-height: 200%;
}
.buttons a {
display: inline-block;
height: 100%;
width: 100%;
margin-bottom: 0.5em;
padding-top: .6em;
padding-bottom: .6em;
color: #fff;
background-color: #aaabbb;
border-radius: 5px;
border: solid #cccccc 1px;
box-shadow: 2px 2px 1px #888888;
}
.buttons a:active {
box-shadow: 1px 1px 0px #888888;
}
JSFiddle for reference
Add to .buttons:
width:0;
Resut: