I'm trying to copy the Staff Directory portion part of this page from CSS, Javascript and HTML to just HTML. Most importantly, I'd love to be able to just make a table as you see here with only the bottom borders/dividers (or whatever they are called) for each line. How do I do that?
http://sps.columbia.edu/about/staff-directory
Thanks!
Edit:
I need only HTML, no CSS please. Thank you though!
Just use the following code-snippet and paste it in you style.css
table {
border-collapse: collapse;
}
tr{
border-bottom: 1px solid black;
}
<table>
<tbody>
<tr>
<td>Lorem</td>
<td>Ipsum</td>
</tr>
</tbody>
</table>
Without using style.css
<table style="border-collapse: collapse;">
<tbody>
<tr style="border-bottom: 1px solid black;">
<td>Lorem</td>
<td>Ipsum</td>
</tr>
</tbody>
</table>
Here's a pure HTML version with inline styles.
Notice styles like "border-collapse" on the TABLE, "border-bottom" and "line-height" on the TRs, and "width" on the TDs
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 80%; margin: 1.5em; font-family: Arial, Helvetica, sans-serif; font-size: 0.85em;">
<tbody>
<tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;">
<td style="width: 70%; font-weight: bold;">Dean</td>
<td style="width: 30%; text-align: right;">Joe Cool</td></tr>
<tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;">
<td style="width: 70%; font-weight: bold;">Senior Vice Dean</td>
<td style="width: 30%; text-align: right;">Jane Cool</td></tr>
<tr style="border-bottom: 1px solid #ccc; line-height: 1.8em;">
<td style="width: 70%; font-weight: bold;">Vice Dean</td>
<td style="width: 30%; text-align: right;">John Doe</td>
</tr>
</tbody>
</table>
I believe you want to remove the border from your table.directory tr and add it to the tbody element.
That will give you a border just between each section.
you could use this
<table style="border-bottom: 1px solid black">
<tr>
<td>Someone</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Dean</td>
</tr>
<tr>
<td><hr /></td>
</tr>
<tr>
<td>Jane</td>
</tr>
<tr>
<td><hr /></td>
</tr>
<tr>
<td>Scott</td>
</tr>
<tr>
<td><hr /></td>
</tr>
</tbody>
</table>
Related
I am working on a project where I need to coloring columns of an html table based on how much percentage of a total that data takes up. For example if Alice has 3 apples and 1 orange, that row should be 75% colored for apple, and the other 25% for orange. And if Bob has 2 apples and 2 oranges is should be colored 50/50. My expertise isn't in HTML/CSS, so I am very confused with how my html is working.
If do only one row of a table I get the correct answer, but when I add rows, they couple together and don't have the same proportions.
<table style="width: 100%">
<tr>
<td width="10%" bgcolor="#4a5666"> </td>
<td width="80%" bgcolor="#304aa6"> </td>
<td width="10%" bgcolor="#4a5666"> </td>
</tr>
<tr>
<td width="6%" bgcolor="#4a5666"> </td>
<td width="16%"bgcolor="#304aa6"> </td>
<td width="76" bgcolor="#4a5666"> </td>
</tr>
</table>
Am I doing something wrong, and is there a way I can fix it?
Thanks
Coupled Rows
Check this solution out:
<html>
<head>
<style type="text/css">
.mytable {
border-collapse: collapse;
width: 100%;
background-color: white;
}
.mytable-head {
border: 1px solid black;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-head td {
border: 1px solid black;
}
.mytable-body {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-body td {
border: 1px solid black;
border-top: 0;
}
.mytable-footer {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.mytable-footer td {
border: 1px solid black;
border-top: 0;
}
</style>
</head>
<body>
<table class="mytable mytable-head">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="16%">16</td>
<td width="68%">68</td>
<td width="16%">16</td>
</tr>
</table>
<table class="mytable mytable-footer">
<tr>
<td width="20%">20</td>
<td width="30%">30</td>
<td width="50%">50</td>
</tr>
</table>
</body>
</html>
Credits to #TokPhobia for this answer (html table cell width for different rows)
tables have columns. The width of a column is constant. Use separate tables
table{
box-sizing:unset;
border-spacing:0;
}
<table style="width: 100%;">
<tr>
<td width="10%" bgcolor="#4a5666"> </td>
<td width="80%" bgcolor="#304aa6"> </td>
<td width="10%" bgcolor="#4a5666"> </td>
</tr>
</table>
<table style="width: 100%;">
<tr>
<td width="6%" bgcolor="#4a5666"> </td>
<td width="16%"bgcolor="#304aa6"> </td>
<td width="76%" bgcolor="#4a5666"> </td>
</tr>
</table>
You're printing two rows of table in a wrong way, try to use col and row class in your tag. That's how it'll be responsive also won't need to add the width too.
I am trying to embed the html table in to email I am sending from one the application I am building below is what I am trying
<table width="400" style="border:1px solid #333">
<tr>
<th>Isolate Lots</th>
<th>Identification</th>
</tr>
#foreach( $sample in $SAMPLES)
#if($EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification") !="Unidentified")
<tr>
<td>$LOTS[$foreach.index].name </td>
<td>$EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification")
</td>
</tr>
#end #end
</table>
The table in the email looks like this
How can I put everything in the Cell inside the table and align them.
After edit
Try to set style="vertical-align: middle" for each cell (since valign="middle" is obsolete).
<table style="border-collapse: collapse; width: 400px">
<tr>
<th style="border: 1px solid #333; vertical-align: middle">Isolate Lots</th>
<th style="border: 1px solid #333; vertical-align: middle">Identification</th>
</tr>
<tr>
<td style="border: 1px solid #333; vertical-align: middle">name</td>
<td style="border: 1px solid #333; vertical-align: middle">jax_trait_isolateIdentification</td>
</tr>
</table>
Upd: added borders
You did not specify what kind of alignment you mean, so here's my suggestion in case you want them centered, just added a 'align="center"' style to the cells.
<table width="400" style="border:1px solid #333">
<tr>
<th align="center">Isolate Lots</th>
<th align="center">Identification</th>
</tr>
#foreach( $sample in $SAMPLES)
#if($EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification") !="Unidentified")
<tr>
<td align="center">$LOTS[$foreach.index].name</td>
<td align="center">$EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification")
</td>
</tr>
#end #end
</table>
well your code is correct maybe u should try this
i just change the style of your table
hope it works. enter code here
<table width="400" border='1px' style='text-align:center'>
<tr>
<th>Isolate Lots</th>
<th>Identification</th>
</tr>
#foreach( $sample in $SAMPLES)
#if($EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification") !="Unidentified")
<tr>
<td>$LOTS[$foreach.index].name </td>
<td>$EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification")
</td>
</tr>
#end #end
</table>
Hi I have a problem showing in Google Chrome.There is additional line showing in Google chrome, but in IE and in Dreamweaver, there is no such line.
The idea is to give a cell 3 borders. I have highlighted with in the snippet where this problem code is.
Thanks for your help in advance.
HTML snippet
table {
width: 500px;
border-collapse: separate;
table-layout: fixed;
border-spacing: 4px;
border: 1px solid grey;
}
.ArrowCell {
border-bottom: 1px solid red;
border-top: 1px solid red;
border-left: 1px solid red;
border-right: 0;
}
<table>
<tr>
<td rowspan="3"> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td bgcolor="#C4E1FF"><b>resultw</b></td>
</tr>
<tr>
<td rowspan="4" class="ArrowCell"> </td>
<td bgcolor="#F0F0F0"> sdf</td>
</tr>
<tr>
<td bgcolor="#C4E1FF"><b>resut1</b></td>
<td rowspan="2">←</td>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="7" class="ArrowCell"> </td>
<td bgcolor="#F0F0F0"> 345</td>
</tr>
<tr>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td bgcolor="#C4E1FF"><b>result</b></td>
</tr>
<tr>
<td rowspan="3"> </td>
<td bgcolor="#F0F0F0"> sf</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td bgcolor="#C4E1FF"><b>rest</b></td>
</tr>
<tr>
<td rowspan="5" class="ArrowCell"> </td> <If I remove the class="", then the whole line will disaapear-->
<td bgcolor="#F0F0F0">sfd</td>
</tr>
<tr>
<td bgcolor="#C4E1FF"><b>result 2</b></td>
<td rowspan="2">←</td>
<td rowspan="3"> </td>
</tr>
<tr>
<td rowspan="5" style="border-left-color:#FFF"> </td>
<td bgcolor="#F0F0F0">4356 </td>
</tr>
<tr>
<td rowspan="4"> </td>
<td rowspan="4"> </td>
</tr>
<tr>
<td bgcolor="#DFFFDF"><b>resultw</b></td>
</tr>
<tr>
<td rowspan="2"> </td>
<td bgcolor="#C4E1FF">avv</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
One solution tried that doesn't work
Add this class to the cell that with additional line.
.ArrowLeft {
border-bottom: 2px solid white;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid white;
}
UPDATE
Although OP's problem may seem specialized, this could apply to anyone that has experienced a stubborn border on a table and can't seem to get rid of it.
Add the following to the table:
Table {
border-collapse: separate;
border-spacing: 0;
empty-cells: hide;
}
This is the result: http://jsfiddle.net/zer00ne/0Leqah5r
Try:
.ArrowCell {
border-top: 1px solid red;
border-left: 1px solid red;
border-bottom: 1px solid red;
border-right: 0 solid transparent;
}
I don't see that extra line in Chrome PC, but when I inspect it with devtools, computed style for .ArrowCell is reported as 0.8px solid black; so I'm guessing that changing it's color to transparent should work.
I just thought of another possibility to your issue. Double check and see if your rowspans might be conflicting by crossing into each other.
Another possible fix is to change border-collapse: separate; to border-collapse: collapse; and maybe border-spacing: 0 as well.
I dont know if this is possible but...I am trying to format a table with css, to have a specific look. This is for a wordpress site that will be updated by my client. The problem is that she is going to be copying/pasting tables with a specific format, and i want the table to have that format without her doing any extra work.
This is what i have so far.
I want the cells with the Bold text to not have a dotted line bellow them.
Right now i am formating the tr lines to add the dotted lines like this:
html
<table class="dotted" border="0" width="450" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"><strong>Argento</strong></td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong></td>
</tr>
.....
css
.dotted tr:nth-child(even) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted tr:nth-child(odd) {
text-decoration: none;
border-bottom: 1px white dotted;
}
Is there a way i can do this without having to add a custom class tag for each that has the bold text in it ?
This is how i want it to look like, but this is all done manually...That's what i am trying to avoid.
ps: Sometimes the tables might have more than 1 'data' under the bold letters so its not always odd, even lines, when it comes to the 'title' and the 'plays' bellow them. (this is a site for musical plays)
-Thanks
#Manoj Kumar Yeah the bold items are always under colspan 2
Since you stated the above comment, I have a CSS hack for it.
Change your CSS to have dotted border only on td instead of tr elements.
Target the elements with colspan=2 with attribute selector to have no border.
table {
background: gray;
}
.dotted td:nth-child(even) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted td:nth-child(odd) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted td[colspan="2"] { /* Attribute selector */
border: 0 none;
}
<table class="dotted" border="0" width="450" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
</tbody>
</table>
I've the below HTML Table. and her i want to get only first row border and the rest only column borders only. as given in the screenshot. please let me know how i can do it in my css.
<table cellspacing="1" class="topbotcol">
<thead>
<tr>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Item</span>
</th>
<th valign="middle" class="colsep rowsep" align="center"> </th>
<th valign="middle" class="colsep rowsep" align="center"> </th>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Qty</span>
</th>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Unit</span>
</th>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Rate $</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="rowsep" align="left"> </td>
<td class="rowsep" align="left">
<div class="para">BUILT-UP WATERPROOF MEMBRANE PANEL ROOFING TO FLAT ROOFS AND POOL DECK</div>
</td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
</tr>
<tr>
<td class="rowsep" align="left"> </td>
<td class="rowsep" align="left">
<div class="para">Preparing surfaces: priming and applying “Grims K1” slurry and “Grims Premier K10” waterproof membrane system as specified</div>
</td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
</tr>
<tr>
<td class="rowsep" align="left"> </td>
<td class="rowsep" align="left">
<div class="para">Membrane collars; pointing with epoxy; reinforced with clamp rings around flanges of rainwater outlets</div>
</td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
</tr>
<tr>
<td class="rowsep" align="left">
<div class="para">A</div>
</td>
<td class="rowsep" align="center">
<div class="para">200mm diameter</div>
</td>
<td class="rowsep" align="center">
<div class="para">13</div>
</td>
<td class="rowsep" align="center">
<div class="para">No.</div>
</td>
<td class="rowsep" align="center">
<div class="para">34.28</div>
</td>
<td class="rowsep" align="center">
<div class="para">445.64</div>
</td>
</tr>
</tbody>
</table>
Thanks
table {
border-top: 1px Solid Black;
border-left: 1px Solid Black;
border-bottom: 1px Solid Black;
border-spacing: 0;
}
th, td {
border-right: 1px Solid Black;
}
th {
background-color: lightgrey;
border-bottom: 1px Solid Black;
}
You can use pseudo classes here:
As your table has th for table headers then you can try this:
table.topbotcol tr:first-of-type{
border-bottom:1px solid #ccc; // Will apply border to first row
}
table.topbotcol tr:first-of-type td{
border:none; // will not apply border to tds of first row, and continue after first row
}
You haven't provided detailed description, i think this might help you!
Pseudo-Classes
Docs
:first-of-type
What you need to do is set a border and set the table border to collapse. This will merge the cell borders. Then remove the unwanted top and bottom borders.
table, th, td{
border: 1px solid #000;
}
table {
border-collapse: collapse;
}
td {
border-bottom: none;
border-top: none;
}
Here's a JSFiddle with a fuller example as well as some more optimizations.
Link to JS Fiddle
Suggestions:
don't use valign or align on table cells, use CSS vertical-align and text-align instead
use paragraph tags instead of <div class="para">
use class names that are descriptive of the content, not its style. This helps with maintenance later when you decide that you do not want something to be font-style-bold anymore. It is easier to change <th> in the CSS than it is to change it in the CSS and THEN go back and change ALL font-style-bold to font-style-normal in your HTML.
You can achieve that by setting the border on the td and th cells, but making the border-top and border-bottom none for the td, but then setting surrounding border of the entire table as well.
The following css is an example:
table {
border-collapse:collapse;
border: 1px solid #000;
}
th {
background-color: #ccc;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
padding: 5px;
}
td {
border-left: 1px solid #000;
padding: 5px;
}
Link to JS Fiddle
Try this
http://jsfiddle.net/aYCjA/
.tbl {
border: 1px solid black;
border-collapse: collapse;
min-width: 300px;
text-align: center;
}
.tbl th, .tbl td {
padding: 2px 5px;
}
.tbl td {
border-left: 1px solid black;
border-right: 1px solid black;
}
.tbl th {
border: 1px solid black;
}
The important thing here is border-collapse: collapse. This attribute prevents showing duplicate borders in sibling cells.