I have a little problem with the colspan and rowspan. I'm trying to make the following table:
I have tried to create it, but I have difficulties on the first row, second td when I put it colspan="2" and to get the third td and put it as rowspan="2". Is this table even possible to be created?
colspan means we just binding columns. whereas rowspan means we are binding rows.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="border: 1px solid black; width: 300px;">
<table style="color: grey;">
<tr>
<td style="border: 1px solid black; background-color: blue;">test</td>
<td colspan="2">colspan 2</td>
</tr>
<tr>
<td width="100px;">test</td>
<td width="100px;" style="border: 1px solid black; background-color: blue;">test</td>
<td width="100px;">test</td>
</tr>
<tr>
<td colspan="2">colspan 2</td>
<td style="border: 1px solid black; background-color: blue;">test</td>
</tr>
</table>
</div>
</body>
</html>
Hope this may help you.
Related
Can someone please tell me how, to insert data in a row? I just want to write something in these 2 rows:
The red + are the cells in which i want to insert text. I tried many things but it always ended up
building a new line. I would appreciate help :)
My html code:
<!DOCTYPE html>
<html>
<head>
<title>HTML rowspan Attribute</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
</style>
</head>
<body style = "text-align:center">
<table>
<tr>
<td>Ajay</td>
<TD ROWSPAN="3">Bild1</TD>
<TD>Bananas</TD>
<TD ROWSPAN="3">Bild2</TD>
</tr>
<tr>
<td>Priya1</td>
</tr>
<tr>
<td>Priya</td>
</tr>
</table>
</body>
</html>
You need to add data in second and third row, so you need to enter those data in second and third <tr> itself.
Here it is
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
}
<table>
<tr>
<td>Ajay</td>
<td ROWSPAN="3">Bild1</td>
<td>Bananas</td>
<td ROWSPAN="3">Bild2</td>
</tr>
<tr>
<td>Priya1</td>
<td>Bananas</td>
</tr>
<tr>
<td>Priya</td>
<td>Bananas</td>
</tr>
</table>
I am trying to separate my tablet but I cannot add the dividing line, if I put style = "border: 1px solid black in tr it appears to me but not in the way I want.
The code is the following:
<template id="diario_report">
tr.border_bottom td {
border-bottom:1px solid black;
}
</style>
<table style="border:1px solid black;border-collapse:collapse;width:100%" cellspacing="0">
<tbody style="border: 1px solid black">
<tr>
<td style="border:1px solid black;width:20%;text-align:center"><strong>Fecha</strong></td>
<td colspan="2" style="border:1px solid black;width:20%;text-align:center"><strong>Cuentas</strong></td>
<td style="border:1px solid black;width:20%;text-align:center"><strong>Debe</strong></td>
<td style="border:1px solid black;width:20%;text-align:center"><strong>Haber</strong></td>
</tr>
<t t-foreach="docs" t-as="val">
<tr>
<td style="text-align:center"><t t-esc="val.get('fecha')"/></td>
<td style="text-align:center"><t t-esc="val.get('titulo')"/></td>
<td></td>
<td style="text-align:center"><t t-esc="val.get('total_debe')"/></td>
<td></td>
</tr>
<tr>
<td></td><td></td>
<td style="text-align:center"><t t-esc="val.get('cuenta_haber')"/></td>
<td></td>
<td style="text-align:center"><t t-esc="val.get('total_haber')"/></td>
</tr>
</t>
</tbody>
I want it to be like this
I had a problem like this before. I don't think tr can take a border styling directly. My workaround was to style the tds in the row:
CSS:
tr.border_bottom td {
border-bottom:1pt solid black;
}
Also add cellspacing="0" as an attribute to <table>.
and give it style.
I have a simple table. I want a 1px solid black border around every cell. For some reason I am only getting a border outlining the entire table. I tried adding border-collapse: separate; to the table style, which I thought was the default, but that didn't work either.
Am I doing something wrong? How do I border every cell?
What I have now is this:
<table style="font-family:Arial; font-size:12px; border:1px solid black;">
<tr style="outline: thin solid">
<th align="left">Initiative</th>
<th align="left">Scheduled Finish</th>
</tr>
<tr style="outline: thin solid">
<td align="left">[Initiative Name]</td>
<td align="left">[Initiative Scheduled Finish Date]</td>
</tr>
</table>
You need to apply border to cells (TD) instead of table
TD,TH {
border:1px solid black;
}
<!doctype html>
<html>
<body style="font-family:Arial;">
<table style="font-family:Arial; font-size:12px;">
<tr>
<th align="left">Initiative</th>
<th align="left">Scheduled Finish</th>
</tr>
<tr>
<td align="left">[Initiative Name]</td>
<td align="left">[Initiative Scheduled Finish Date]</td>
</tr>
</table>
</body>
</html>
In your css try:
th, td { border: 1px solid black; }
Safest way is giving your table a class. This way it won't affect any other tables in your page.
.my-table-border th,
.my-table-border td {
border: 1px solid black
}
<!doctype html>
<html>
<body style="font-family:Arial;">
<table class="my-table-border" style="font-family:Arial; font-size:12px; border:1px solid black;">
<tr style="outline: thin solid">
<th align="left">Initiative</th>
<th align="left">Scheduled Finish</th>
</tr>
<tr style="outline: thin solid">
<td align="left">[Initiative Name]</td>
<td align="left">[Initiative Scheduled Finish Date]</td>
</tr>
</table>
</body>
</html>
The table class is my-table-border and the selector is only picking tds and ths inside of tables that have this class.
I need to make a div with a solid border. I have a good start but having some trouble getting the alignment right and getting the lines working. Below is an image of the requested HTML
So far I think I'm some what close with my HTML but my two top lines do not match and I cant get the vertical line in.
code:
<div style="width:60%;border:solid">
<div style="width:45%; display: inline-block;">
<div style="margin-left:5px;">
Domestic Shipping and Handling<br>
<hr style="width: 5px;"/><br>
$25..01 to $50.00..add $7.95 <br>
$50.01 to $75.00...add $11.95 <br>
$75.01 to $100.00...add $13.95 <br>
$100.01 to $150.00...add $17.95 <br>
$150.01 to $200.00 .. add $19.95 <br>
200.01 – above.. add $23.95
</div>
</div>
<div style="width: 8%; display: inline-block;"><hr style="width: 1px; height: 100px;"></div>
<div style="width:45%; display: inline-block;">
Canada, AK, HI, PR Shipping and Handling<br>
<hr style="width: 5px;"/><br>
$.01-$25.00.. add $14.95<br>
$25.01 - $50.00.add $15.95<br>
$50.01 to $75.00...add $18..95<br>
$75.01 to $100.00...add $20.95<br>
$100.01 to $150.00..add $25.95<br>
$150.01 to $200.00..add $28.95<br>
$200.01 to above....add $32.95
</div>
</div>
Here is what my HTML looks like on the web page currently:
I'm currently missing the vertical line, top headers are not aligning and bottom texts are not aligning. Originally this was using a table which is fine but now we want it to be responsive and to use div's. I also can not use css. I would prefer to use css personally but that request was denied.
You should probably build this using html tables. See here for further help.
<style>
table,
th {
border: 1px solid black;
border-collapse: collapse;
}
td {
border-right: 1px solid black;
}
</style>
<table>
<tr>
<th>Domestic Shipping and Handling</th>
<th>Canada, AK, HI, PR Shipping and Handling</th>
</tr>
<tr>
<td> $25..01 to $50.00..add $7.95 </td>
<td> $.01-$25.00.. add $14.95</td>
</tr>
<tr>
<td>$50.01 to $75.00...add $11.95</td>
<td>$25.01 - $50.00.add $15.95</td>
</tr>
<tr>
<td>$75.01 to $100.00...add $13.95</td>
<td>$50.01 to $75.00...add $18..95</td>
</tr>
<tr>
<td>$100.01 to $150.00...add $17.95</td>
<td>$75.01 to $100.00...add $20.95</td>
</tr>
<tr>
<td>$150.01 to $200.00 .. add $19.95</td>
<td>$100.01 to $150.00..add $25.95</td>
</tr>
<tr>
<td>200.01 – above.. add $23.95</td>
<td>$150.01 to $200.00..add $28.95</td>
</tr>
</table>
Thank you so much for your post. I used your code and adjusted it a little to get my answer but your code is better then mine. Here is my code after adjustments:
<table style="border: 1px solid black;">
<tr>
<th style="border: 1px solid black; border-collapse: collapse; padding:5px;">Domestic Shipping and Handling</th>
<th style="border: 1px solid black; border-collapse: collapse; padding:5px;">Canada, AK, HI, PR Shipping and Handling</th>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;"> $25..01 to $50.00..add $7.95 </td>
<td style="padding:5px;"> $.01-$25.00.. add $14.95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">$50.01 to $75.00...add $11.95</td>
<td style="padding:5px;">$25.01 - $50.00.add $15.95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">$75.01 to $100.00...add $13.95</td>
<td style="padding:5px;">$50.01 to $75.00...add $18..95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">$100.01 to $150.00...add $17.95</td>
<td style="padding:5px;">$75.01 to $100.00...add $20.95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">$150.01 to $200.00 .. add $19.95</td>
<td style="padding:5px;">$100.01 to $150.00..add $25.95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">200.01 – above.. add $23.95</td>
<td style="padding:5px;">$150.01 to $200.00..add $28.95</td>
</tr>
</table style="border: 1px solid black;">
Hope it helps someone else. I added padding as well to this because the other version was really close together and hard to read.
This question already has answers here:
How do I increase the width of a column in an HTML table?
(5 answers)
Closed 7 years ago.
Below is the html with embedded css code,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Embedded style</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 style="max-width:66%;margin:auto;text-align:center;">2008 OFFICERS</h1>
<br><br><br><br>
<!-- Tables are surrounded with table tags -->
<table style="border: 1px solid black;margin:auto;max-width:33%">
<!-- thead shows at the top of the table and must come before tbody -->
<thead style="max-width:100%">
<tr>
<td colspan="3" style="font-weight:bold;text-align:center;border:1px solid black;">Current Officers</td>
</tr>
</thead>
<!-- The main data for the table goes between tbody if you use thead or tfoot -->
<tbody style="max-width:100%">
<tr style="max-width:100%">
<td style="border: 1px solid black;">President</td>
<td style="border: 1px solid black;">Jesse Blair</td>
<td style="border: 1px solid black;">555-7189</td>
</tr>
<tr>
<td style="border: 1px solid black;max-width:30%">Vice-President</td>
<td style="border: 1px solid black;">Frank Smythe</td>
<td style="border: 1px solid black;">505-555-3576</td>
</tr>
<tr>
<td style="border: 1px solid black;">Secretary</td>
<td style="border: 1px solid black;">Jean Darr</td>
<td style="border: 1px solid black;">555-5415</td>
</tr>
<tr>
<td style="border: 1px solid black;">Treasurer</td>
<td style="border: 1px solid black;">Linda Carter</td>
<td style="border: 1px solid black;">555-9653</td>
</tr>
</tbody>
</table>
<br><br>
<!-- Tables are surrounded with table tags -->
<table style="border: 1px solid black;margin:auto;">
<!-- thead shows at the top of the table and must come before tbody -->
<thead>
<tr>
<td colspan="2" style="font-weight:bold;text-align:center;border:1px solid black;">Board Members at Large</td>
</tr>
</thead>
<!-- The main data for the table goes between tbody if you use thead or tfoot -->
<tbody>
<tr>
<td style="border: 1px solid black;">Dick Wilson</td>
<td style="border: 1px solid black;">555-1982</td>
</tr>
<tr>
<td style="border: 1px solid black;">Jan-Davis</td>
<td style="border: 1px solid black;">555-3530</td>
</tr>
</tbody>
</table>
</body>
</html>
Am using max-width with percentage values for responsive design.
Am suppose to use css properties for any code further.
How do I increase the width of the table cell?
Note: Inline css is intentionally part of exercise
As the name suggests, the max-width attribute describes the maximum width the element it applies to can have. If you want to change the width of an element, simply use width.
you have set table width to 33% , I think this cause all the problem remove this and width to the td in percentage.
<td width="35%" style="border: 1px solid black;">President</td>
<td width="30%" style="border: 1px solid black;">Jesse Blair</td>
<td width="35%" style="border: 1px solid black;">555-7189</td>
set width according to your requirement or set using css class and use in code.