I'm not too familiar with HTML so I'm reaching out to the HTML wizards for help. My goal is to create a table that shows Order Header information on one line with Order detail information on rows below that. Then that would repeat for every order. Here's what I have so far. I'm asking for a nudge in the right direction to get the Order # to repeat for each new order.
This is within a piece of software that uses the command {BEGIN*REPEAT} to repeat rows of data.
Here is my code:
{BEGIN*HTML}
<head>
<style>
table,
td,
th {
border: 1px solid green;
font-family: Arial, Helvetica, sans- serif;
}
td {
padding: 1px 5px 1px 5px;
}
th {
background-color: purple;
color: white;
padding: 1px 5px 1px 5px;
}
text {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<!--Used to add image
<table style="border:0px">
<tr style="border:0px">
<td style="border:0px"><p><img src="" style="position:relative; left:-20px; width:475px;"</td>
</tr>
<table>
Used to right justify numeric fields: style="text-align:right;"
-->
<p>Below is a list of orders created for your customers.</p>
<p><b>Order Details</b>
</p>
<table>
<thead>
<tr>
<th>Ord.#</th>
<th>Date</th>
<th>Cust.</th>
<th>Ship-to</th>
<th>City</th>
<th>ST</th>
<th>ExpectedShip</th>
<th>Item</th>
<th>Qty</th>
<th>UnitPrice</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<th>{ORDNUMBER}</th>
</tr>
{BEGIN*REPEAT}
<tr>
<td>{ORDNUMBER}</td>
<td>{OrdDateYYYYMMDD}</td>
<td>{NAMECUST}</td>
<td>{SHPNAME}</td>
<td>{SHPCITY}</td>
<td>{SHPSTATE}</td>
<td>{EXPDATE}</td>
<td>{ITEM}</td>
<td>{ORIGQTY}</td>
<td>{UNITPRICE}</td>
<td>{LOCATION}</td>
</tr>
{END*REPEAT}
</tbody>
</table>
<p></p>
<p></p>
{END*HTML}
Here is an example for you to get started.
table {
border-collapse: collapse;
}
tr:not(:first-child) {
counter-increment: order;
}
td {
border: 1px solid grey;
padding: 5px 10px;
}
td:first-child:after {
content: "ORD000" counter(order);
}
td:nth-child(2):after {
content: "20060717";
}
tr:first-child td:after {
display: none;
}
<table>
<tr>
<td>This Column increases by 1</td>
<td>This Column just repeats</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Related
I currently have a table with my content in but it looks like
I would like it to have space between each row to make them distinctively separate and look something like this
I have tried using padding on my td elements and border spacing on my tr elements. What would be the easiest way to do this within bootstrap 5? Below is my HTML and CSS
.icon-green {
color: green;
}
table {
border-collapse: separate;
border-spacing: 0 15px;
}
th,
td {
text-align: center;
vertical-align: middle;
padding: 5px;
}
<table>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
<tr>
<td class="td">10001</td>
<td>Tom</td>
<td>M</td>
<td>30</td>
</tr>
<tr>
<td class="td">10002</td>
<td>Sally</td>
<td>F</td>
<td>28</td>
</tr>
<tr>
<td class="td">10003</td>
<td>Emma</td>
<td>F</td>
<td>24</td>
</tr>
</table>
I think you already fixed most of your own problem except that because everything is white, it's hard to see that there is space between the rows. Added a slight box shadow on the rows. I'm not sure how you are using bootstrap here though, but I assume it's similar if you want to override bootstrap styles
table {
border-collapse: separate;
border-spacing: 0px 15px;
}
tr{
/* only added this line */
box-shadow:0px 1px 2px 3px rgba(0, 0, 0, 0.142);
}
th,
td {
width:100%;
background-color:white;
text-align: center;
vertical-align: middle;
padding: 5px;
}
<table>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
<tr>
<td class="td">10001</td>
<td>Tom</td>
<td>M</td>
<td>30</td>
</tr>
<tr>
<td class="td">10002</td>
<td>Sally</td>
<td>F</td>
<td>28</td>
</tr>
<tr>
<td class="td">10003</td>
<td>Emma</td>
<td>F</td>
<td>24</td>
</tr>
</table>
There are limited things you can do with tr elements. You can use box-shadow and outline on them as below. Note, I've had to add a class to your table so I can increase the specificity of the rule that causes the table not to collapse.
.icon-green {
color: green;
}
/* note the added class, if you use just 'table' as the selector bootstrap will override it and collapse your table */
table.mytable {
border-collapse: separate;
border-spacing: 0 15px;
}
th,
td {
text-align: center;
vertical-align: middle;
padding: 10px;
}
tr {
border-radius: 0.25rem;
outline: 1px solid #cccccc;
box-shadow: 10px 10px 10px 0px #d0d0d0;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous" defer></script>
<table class='mytable'>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
<tr>
<td class="td">10001</td>
<td>Tom</td>
<td>M</td>
<td>30</td>
</tr>
<tr>
<td class="td">10002</td>
<td>Sally</td>
<td>F</td>
<td>28</td>
</tr>
<tr>
<td class="td">10003</td>
<td>Emma</td>
<td>F</td>
<td>24</td>
</tr>
</table>
How can I have different colors on each cell. What I did is only to make the whole red, just to the first 3 cells only yellow blue and red. How can it be this? I should refer to specific <td>? I see this question, but it wasn't exactly what I was searching.
body {
background: #000;
}
#wrap {
margin: 0 auto;
/* margin 0 auto will center that box in your document */
width: 780px;
/*size of your box*/
background: #000;
text-align: center;
/* everything will be written in that box will be centered horizontaly*/
}
td:hover {
background-color: #ff0000;
color: #000000;
}
<div id="wrap">
<table width="780">
<tr>
<td align="center">
<table border=1>
<tbody>
<!-- Results table headers -->
<tr>
<th>Messages Per Month</th>
<th>1 Month Pricing</th>
<th>3 Month Pricing</th>
<th>12 Month Pricing</th>
</tr>
<tr>
<td>500</td>
<td>$14.95/Month</td>
<td>$12.95/Month</td>
<td>$9.95/Month</td>
</tr>
<tr>
<td>1,000</td>
<td>$24.95/Month</td>
<td>$20.95/Month</td>
<td>$17.95/Month</td>
</tr>
<tr>
<td>1,500</td>
<td>$37.95/Month</td>
<td>$31.95/Month</td>
<td>$26.95/Month</td>
</tr>
<tr>
<td>2,000</td>
<td>$49.95/Month</td>
<td>$41.95/Month</td>
<td>$35.95/Month</td>
</tr>
<tr>
<td>2,500</td>
<td>$62.95/Month</td>
<td>$52.95/Month</td>
<td>$44.95/Month</td>
</tr>
<tr>
<td>5,000</td>
<td>$119.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>7,500</td>
<td>$179.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>10,000</td>
<td>$219.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
Try using nth-child on the elements, here is a quick reference to all kinds of selections.
td:nth-child(odd) {
color: green;
}
td:nth-child(even) {
color: red;
}
td {
border: 1px solid gray;
}
<table>
<tr>
<td>2,500</td>
<td>$62.95/Month</td>
<td>$41.95/Month</td>
<td>$35.95/Month</td>
</tr>
<tr>
<td>1,500</td>
<td>$52.95/Month</td>
<td>$31.95/Month</td>
<td>$25.95/Month</td>
</tr>
</table>
You can use nth-child css psuedoselectors:
td:nth-child(1) {
color: yellow;
background-color: #AAA;
}
td:nth-child(2) {
color: red;
}
td:nth-child(3) {
color: blue;
}
<table>
<tr>
<td>Yellow</td>
<td>Red</td>
<td>Blue</td>
<td>Normal</td>
</tr>
</table>
First let's create a simplify version of your table.
table tr td{
border:2px solid black;
width:70px;height:30px;
text-align: center;
}
table{
border-collapse: collapse;
}
table:hover tr td:nth-child(1){
background: yellow;
}
table:hover tr td:nth-child(2){
background:blue;
}
table:hover tr td:nth-child(3){
background:red;
}
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td>five</td>
<td>six</td>
<td>seven</td>
<td>eight</td>
</tr>
<tr>
<td>nine</td>
<td>ten</td>
<td>eleven</td>
<td>twelve</td>
</tr>
</table>
Let me give you a bit of an explanation.. the table:hover tr td:nth-child(1) part, first the table:hover part, when we hover to the whole table, we want to target all the tr, inside the table, then inside the tr, we want to only select the first td ":nth-child(1)" of every tr, so this will only select and change the background color of the one,five and nine td (which is the first column of the table) color to yellow if we hover the mouse to the whole body of the table.
PS: For me, I prepare to do this on JavaScript.
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>
For the following table, the text in the thead element doesn't respond to any CSS rules.
I thought it would inherit the rules from thr table.declensionTable element, but it doesn't.
I created a CSS rule with the table.declensionTable thead selection, but that didn't work either.
What am I doing wrong?
body {
font-family: "Verdana", Sans-serif;
}
table.declensionTable{
font-family: "Courier New", Serif;
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
margin-bottom: 10px;
}
table.declensionTable thead{
font-family: "Courier New", Serif;
}
table.declensionTable th{
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
}
table.declensionTable td{
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
}
<table class="declensionTable">
<thead><strong>klub</strong>: <em>club</em>; an inanimate masculine noun</thead>
<tbody>
<tr>
<th></th><th>Singular</th><th>Plural </th>
</tr>
<tr>
<td><strong>Nom</strong></td> <td>klub</td> <td>kluby</td>
</tr>
<tr>
<td><strong>Gen</strong></td> <td>klubu</td> <td>klubów</td>
</tr>
<tr>
<td><strong>Dat</strong></td> <td>klubowi</td> <td>klubom</td>
</tr>
<tr>
<td><strong>Acc</strong></td> <td>klub</td> <td>kluby</td>
</tr>
<tr>
<td><strong>Inst</strong></td> <td>klubem</td> <td>klubami</td>
</tr>
<tr>
<td><strong>Loc</strong></td> <td>klubie</td> <td>klubach</td>
</tr>
<tr>
<td><strong>Voc</strong></td> <td>klubie</td> <td>kluby</td>
</tr>
</tbody>
</table>
You're not using the thead element right. It's a container for rows to group the header content. It should display as you expect if you add a row inside the thead.
The <thead> element must have one or more <tr> tags inside.
http://www.w3schools.com/tags/tag_thead.asp
Probably because you're confusing the browser with your markup.
The thead tag is expecting table data (tr, td, etc.)
Why not just use a styled header tag above the table?
Fiddle: http://jsfiddle.net/on1ypL4z/
body {
font-family:"Verdana", Sans-serif;
}
table.declensionTable {
font-family:"Courier New", Serif;
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
margin-bottom: 10px;
}
h3.table-desc {
font-family:"Courier New", Serif;
}
table.declensionTable th {
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
}
table.declensionTable td {
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
}
<h3 class="table-desc"><strong>klub</strong>: <em>club</em>; an inanimate masculine noun</h3>
<table class="declensionTable">
<tbody>
<tr>
<th></th>
<th>Singular</th>
<th>Plural</th>
</tr>
<tr>
<td><strong>Nom</strong>
</td>
<td>klub</td>
<td>kluby</td>
</tr>
<tr>
<td><strong>Gen</strong>
</td>
<td>klubu</td>
<td>klubów</td>
</tr>
<tr>
<td><strong>Dat</strong>
</td>
<td>klubowi</td>
<td>klubom</td>
</tr>
<tr>
<td><strong>Acc</strong>
</td>
<td>klub</td>
<td>kluby</td>
</tr>
<tr>
<td><strong>Inst</strong>
</td>
<td>klubem</td>
<td>klubami</td>
</tr>
<tr>
<td><strong>Loc</strong>
</td>
<td>klubie</td>
<td>klubach</td>
</tr>
<tr>
<td><strong>Voc</strong>
</td>
<td>klubie</td>
<td>kluby</td>
</tr>
</tbody>
</table>
Here's an alternative approach to what you are trying to do using a definition list:
<dl>
<dt>klub</dt>
<dd>
<div><em>club</em>; an inanimate masculine noun</div>
<table class="declensionTable">
<thead>
<tr>
<th></th>
<th>Singular</th>
<th>Plural</th>
</tr>
</thead>
<tbody>
<tr>
<th>Nom</th>
<td>klub</td>
<td>kluby</td>
</tr>
<tr>
<th>Gen</th>
<td>klubu</td>
<td>klubów</td>
</tr>
<tr>
<th>Dat</th>
<td>klubowi</td>
<td>klubom</td>
</tr>
<tr>
<th>Acc</th>
<td>klub</td>
<td>kluby</td>
</tr>
<tr>
<th>Inst</th>
<td>klubem</td>
<td>klubami</td>
</tr>
<tr>
<th>Loc</th>
<td>klubie</td>
<td>klubach</td>
</tr>
<tr>
<th>Voc</th>
<td>klubie</td>
<td>kluby</td>
</tr>
</tbody>
</table>
</dd>
</dl>
Fiddle: http://jsfiddle.net/v4h6zkcz/2/
So I appreciate the help.
Regulus and Bitwise Creative were both right, but they didn't take it far enough.
You're not using the thead element right. It's a container for rows to group the header content. It should display as you expect if you add a row inside the thead.
It turns out I was just being a complete n00b and I put my th tags inside the body of the table, instead of in the thead header. So while it was right that I needed some tr tags inside thead /thead, the fact was I already had the header properly formatted- just in the wrong place.
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.