I'm trying to make table that looks like this:
This is my code:
<table>
<tr>
<th></th>
<th>Focus</th>
<th>Impact</th>
<th>Goal</th>
<th>Supporters</th>
<th>Days Left</th>
<th>Donation Form</th>
</tr>
<tr>
<tr>
<td>First!</td>
<td>Fundraiser</td>
<td>$0</td>
<td>0%</td>
<td>0</td>
<td>47</td>
<td><i class="fa fa-file-pdf-o"></i></td>
</tr>
<tr >
<td colspan="7"><i class="fa fa-exclamation-circle"></i> Your campaign has not been launched.</td>
</tr>
</tr>
</table>
But I don't think having a tr inside of a tr is semantic. Or is it? How could I do this?
As mentioned, you have a tag to much.
Personally I would also use <thead> and <tbody>, but it is not necessary.
<table>
<thead>
<tr>
<th></th>
<th>Focus</th>
<th>Impact</th>
<th>Goal</th>
<th>Supporters</th>
<th>Days Left</th>
<th>Donation Form</th>
</tr>
</thead>
<tbody>
<tr>
<td>First!</td>
<td>Fundraiser</td>
<td>$0</td>
<td>0%</td>
<td>0</td>
<td>47</td>
<td><i class="fa fa-file-pdf-o"></i></td>
</tr>
<tr>
<td colspan="7"><i class="fa fa-exclamation-circle"></i> Your campaign has not been launched.</td>
</tr>
</tbody>
</table>
Related
I'm working on a project that injects data into a web page, the web page handles this data and shows them in HTML tables, after that i want the web page to be converted into a PDF File by the user using the print option and printing to pdf. but when that happens the table rows break across the pages and the break affects the content of the row making it illegible. i want a way where i can prevent the row itself from breaking across pages and only let the table break. i've seen many similar questions, most of the answers on them recommend using combinations of CSS break-after and break-before, non of these methods worked in my case. how can i achieve what i want?
my code
<style>
.table-container{
width:80%;
margin:auto;
}
table,td,th{
padding:10px;
border:1px solid #111c4e;
border-collapse: collapse;
font-size:14px;
width:100%;
}
th{
background-color:#111c4e;
color:white;
font-weight:bold;
}
td{
font-weight:normal;
color:#111c4e;
}
h2,h3{
color:#111c4e;
}
tr{
break-after: always;
break-before: always;
}
</style>
<h2>Choosen Services</h2>
<div class="table-container zoho-one-membership-table">
<h3>Zoho One Subscription</h3>
<table class="print-friendly">
<tr>
<th>Service</th> <th>Details</th> <th>Price</th> <th>Discount</th> <th>Final Price</th> <th>Value Saved</th>
</tr>
<tr>
<td>Zoho One Membership Subscription</td> <td><%=employeesNum%> Employees - <%=country%> - <%=countryRate%>$ </td> <td></td> <td></td> <td></td> <td></td>
</tr>
<tr>
<td></td> <td></td> <td><%=totalPrice%>$</td> <td><%=membershipDiscount%>%</td> <td><%=finalPrice%>$</td> <td><%=membershipValueSaved%>$</td>
</tr>
</table>
</div>
<div class="table-container implementation-table">
<h3>Implementation Services<h3>
<table class="print-friendly">
<tr>
<th>Service</th> <th>Work Hours</th> <th> Duration</th> <th>Price</th> <th>Discount</th> <th>Final Price</th> <th> Value Saved</th>
</tr>
<%=impRows%>
<tr>
<td></td> <td></td> <td><%=daysSum%> Work Days</td> <td><%=totalImpPrice%>$</td> <td><%=implementationDiscount%>%</td> <td><%=finalImpPrice%>$</td> <td><%=impValueSaved%>$</td>
</tr>
</table>
</div>
<div class="table-container admin-training-table">
<h3>Training For Admins<h3>
<table class="print-friendly">
<tr>
<th>Service</th> <th>Work Hours</th> <th> Duration</th> <th>Price</th> <th>Discount</th> <th>Final Price</th> <th> Value Saved</th>
</tr>
<%=adminRows%>
<tr>
<td></td> <td></td> <td><%=adminTrainingDaysSum%> Work Days</td> <td><%=totalATrainPrice%>$</td> <td><%=trainingDiscount%>%</td> <td><%=finalATrainPrice%>$</td> <td><%=aTrainValueSaved%>$</td>
</tr>
</table>
</div>
<div class="table-container user-training-table">
<h3>Training For Users<h3>
<table class="print-friendly">
<tr>
<th>Service</th> <th>Work Hours</th> <th> Duration</th> <th>Price</th> <th>Discount</th> <th>Final Price</th> <th> Value Saved</th>
</tr>
<%=userRows%>
<tr>
<td></td> <td></td> <td><%=userTrainingDaysSum%> Work Days</td> <td><%=totalUTrainPrice%>$</td> <td><%=trainingDiscount%>%</td> <td><%=finalUTrainPrice%>$</td> <td><%=uTrainValueSaved%>$</td>
</tr>
</table>
</div>
<div class="table-container summary-training-table">
<h3>Training Summary<h3>
<table class="print-friendly">
<tr>
<th>Service</th> <th>Work Hours</th> <th> Duration</th> <th>Price</th> <th>Discount</th> <th>Final Price</th> <th> Value Saved</th>
</tr>
<tr class="admin-training-row">
<td>Admin Training: <%=adminTrainingServices%></td> <td><%=adminTrainingHoursSum%></td> <td><%=adminTrainingDaysSum%> Work Days</td><td></td><td></td><td></td><td></td>
</tr>
<tr class="user-training-row">
<td>User Training: <%=userTrainingServices%></td> <td><%=userTrainingHoursSum%></td> <td><%=userTrainingDaysSum%> Work Days</td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td> <td><%=totalTrainingPrice%>$</td> <td><%=trainingDiscount%>%</td> <td><%=finalTrainingPrice%>$</td> <td><%=trainingValueSaved%>$</td>
</tr>
</table>
</div>
I am currently learning HTML table, I want to my HTML table looks like this .
How do i create a table in html like that? What's wrong with my code? Link to my full code
<section class="container">
<table class="order-table table">
<thead>
<tr>
<th>NAME</th>
<th>EMAIL</th>
<th>ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>john#john.com</td>
<td>0001</td>
</tr>
<tr>
<td>Jane</td>
<td>jane#jane.com</td>
<td>0002</td>
<tr>
<td><i class="mdi mdi-subdirectory-arrow-right"></i>Doe</td>
<td>doe#doe.com</td>
<td>0002a</td>
</tr>
<tr>
<td><i class="mdi mdi-subdirectory-arrow-right"></i>Allan</td>
<td>allan#allan.com</td>
<td>0002b</td>
</tr>
<tr>
</tr>
<tr>
<td>Smith</td>
<td>smith#smith.com</td>
<td>0003</td>
</tr>
</tbody>
</table>
</section>
I am trying to create a table using HTML like this:
I wrote something like this:
<table>
<caption>Bill Summary</caption>
<tr>
<th rowspan="2">Months</th>
<th colspan="3">Bills</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<td>Electricity</td>
<td>Water</td>
<td>Gas</td>
<td align="center">9925</td>
</tr>
<tr>
<td>January</td>
<td>1000</td>
<td>1000</td>
<td>975</td>
</tr>
<tr>
<td>February</td>
<td>1200</td>
<td>1200</td>
<td>975</td>
</tr>
<tr>
<td>March</td>
<td>1500</td>
<td>1100</td>
<td>975</td>
</tr>
</table>
But it gives out put like this:
I need to have that one total amount aligned in the center and a border like the first table image
Thanks in Advance.
I guess you could use the rowspan attribute here as well.
table, th, td {
border: 1px solid;
border-collapse: collapse;
}
<!DOCTYPE html>
<html>
<body>
<table>
<caption>Bill Summary</caption>
<tr>
<th rowspan="2">Months</th>
<th colspan="3">Bills</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>Electricity</th>
<th>Water</th>
<th>Gas</th>
</tr>
<tr>
<td>January</td>
<td>1000</td>
<td>1000</td>
<td>975</td>
<td rowspan="3">9925</td>
</tr>
<tr>
<td>February</td>
<td>1200</td>
<td>1200</td>
<td>975</td>
</tr>
<tr>
<td>March</td>
<td>1500</td>
<td>1100</td>
<td>975</td>
</tr>
</table>
</body>
</html>
move total value to third row and modify like this
<td align="center" style="vertical-align: middle" rowspan="3" >9925</td>
I'm new to HTML/CSS, and I'm having a hard time aligning the Opening days, hours, closing days of the Chicken shop against the Open, Hours, and Close from the table. I want the days and time to align directly below each category. Such as Open (Sun/Mon..), Hours (9-3pm), Close (Tues/Fri). Below are my codes, any advise would be greatly appreciated!!! Thank you!!!
<table id="shops">
<tr>
<th>Shops</th>
<th>Location</th>
<th>Store Hours</th>
<th>Products</th>
</tr> <!-- Nested table for store hours and product types-->
<tr>
<td colspan="2"></td>
<td>
<table id="hours_table">
<tr>
<th>OPEN</th>
<th>HOURS</th>
<th>CLOSE</th>
</tr>
</table>
</td>
<td>
<table id="products_table">
<tr>
<th>Animals</th>
<th>Cost</th>
<th>Items</th>
<th>Cost</th>
</tr>
</table>
</td>
</tr>
<tr>
<td id="chicken_shop">Cuckoo House Chicken Shop</td>
<td>West Natura</td>
<td>
<table id="chicken_hours">
<tr>
<td>SUN/MON/WED/THURS/SAT</td>
<td>9AM - 3PM</td>
<td>TUES/FRI</td>
</tr>
</table>
</td>
</table>
Hi here is the solution:
<table id="shops" border='1'>
<tr>
<th>Shops</th>
<th>Location</th>
<th>Store Hours</th>
<th colspan="4">Products</th>
</tr> <!-- Nested table for store hours and product types-->
<tr>
<td id="chicken_shop">Cuckoo House Chicken Shop</td>
<td>West Natura</td>
<td>
<table width="333" id="hours_table" border='1'>
<tr>
<td>OPEN</td>
<td>HOURS</td>
<td>CLOSE</td>
</tr>
<tr>
<td>SUN/MON/WED/THURS/SAT</td>
<td>9AM - 3PM</td>
<td>TUES/FRI</td>
</tr>
</table>
</td>
<th>Animals</th>
<th>Cost</th>
<th>Items</th>
<th>Cost</th>
</tr>
</table>
Instead of using <th> you have to use <td> even if it is part of the table head.
<table>
<thead>
<tr>
<td>Shops</td>
<td>SOmethng</td>
<td>Something#2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Something in the body of the table</td>
<td>something</td>
<tdSomething</td>
</tr>
</tbody>
</table>
I suggest using w3schools.com for additional info.Also you can add borders in case you want some borders around it.
I'm using Bootstrap 3 and I want to remove border of cell:
<td colspan="4"></td>
This is the current table:
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>N°</th>
<th>Fecha salida</th>
<th>Fecha regreso</th>
<th>Ciudad</th>
<th>País</th>
<th>Días</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>1</td>
<td>03/02/2015</td>
<td>05/02/2015</td>
<td>Ciudad de Panamá</td>
<td>Panamá</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>05/12/2014</td>
<td>05/12/2014</td>
<td>New York</td>
<td>EE.UU</td>
<td>1</td>
</tr>
<tr class="bold">
<td colspan="4"></td>
<td align="right">Días fuera</td>
<td>4</td>
</tr>
</tbody>
</table>
Current View:
Desired View:
One way to do it is to set the border-bottom css property to hidden for <td colspan="4"></td>.
<td colspan="4" style="border-bottom: hidden;"></td>.
...or include the css in your 'bootstrap overriding stylesheet' (if you have one).
Fiddle
Use this CSS
#hiddenborder{
border-bottom: hidden;
border-left: hidden;
}