I am having some difficulties formatting a table I am creating. I am wanting my <th> to go the full width of the table and both <tr>'s. Also even though I have my first <td> set to 200px for width, it is going over as much as my <th>.
https://jsfiddle.net/bL47ro78/
How can I get..
<th class="view_topic_th">
<td>Date</td>
</th>
To be as wide as my table and <tr?'s.
Here is the solution that may help you to format your table:
<table class="forum_view_topic_table">
<tr calss="view_topic_th">
<th class="view_topic_th_left" align="right">Date</th>
<th class="view_topic_th_right">Count</th>
</tr>
<tr>
<td width='200' valign='top' align='center' style='border: 1px solid #000000;'>User Info Here!</td>
<td valign='top' style='border: 1px solid #000000'>
<div style='min-height: 125px;'>Post 1
<br />by John Smith
<hr />Content</div>
</td>
</tr>
<tr>
<td colspan='2'>
<hr />
</td>
</tr>
<?php } ?>
</table>
http://jsfiddle.net/bL47ro78/10/
Related
I am creating a table for an university task. Every once in a while we have to put our code into a validator. For some reason the validator keeps showing these errors:
https://i.ibb.co/dLnzTh2/error.png
The errors are about the <th> tag inside the <thead>.
<table style="width: 700px" >
<thead>
<tr>
<th colspan="8">Market Shares of Graphics Adapters in Q4 2013
</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">-</td>
<td rowspan="2">Q4 2013</td>
<td rowspan="2">Q3 2013</td>
<td colspan="4" rowspan="1" style="text-align: center">Quarter over Quarter Changes</td>
<td rowspan="2">2012</td>
</tr>
<tr>
<td colspan="2">Unit Shipments</td>
<td colspan="2">Share</td>
</tr>
<tr>
<td>AMD</td>
<td>18.30%</td>
<td>20.70%</td>
<td colspan="2">-10.40%</td>
<td colspan="2">-2.40%</td>
<td>19.70%</td>
</tr>
</tbody>
</table>
Any ideas what is causing this?
For reference this is how the whole table looks like:
https://i.ibb.co/LkMbWc9/table.png
This always means "a column without any cells" - harder to find with collspans, but possible - in the snippet Unit Shipments and Share are blue - this are doubled td, and it makes an empty column in both - since both are colspaned from the top.
Shortly - whole table is too wide of 2 not needed cells
td, th{ border: 1px solid red} /* this shows every th, td even empty */
td[colspan] { border: 1px solid blue} /* this shows colspans */
<table style="width: 700px" >
<thead>
<tr>
<th colspan="8">Market Shares of Graphics Adapters in Q4 2013
</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">-</td>
<td rowspan="2">Q4 2013</td>
<td rowspan="2">Q3 2013</td>
<td colspan="4" rowspan="1" style="text-align: center">Quarter over Quarter Changes</td>
<td rowspan="2">2012</td>
</tr>
<tr>
<td colspan="2">Unit Shipments</td>
<td colspan="2">Share</td>
</tr>
<tr>
<td>AMD</td>
<td>18.30%</td>
<td>20.70%</td>
<td colspan="2">-10.40%</td>
<td colspan="2">-2.40%</td>
<td>19.70%</td>
</tr>
</tbody>
</table>
My question is that how can I make a row with different columns quantity ?
For example I want to have 2 columns in last row in this picture (the portion of each cell must be 50%).
Another question that I have is that how can I make text starts from first line in a cell (center cell , in this picture) ?
My code is :
table {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 5px;
}
th,
td {
padding: 10px;
}
<table style="width:100%" border="1px" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow" height="500px">
<caption>web design homework</caption>
<tr>
<th colspan="3">My Website</th>
</tr>
<tr bgcolor="#77E022" height="20px" align="left">
<td colspan="3">
home products contact us
</td>
</tr>
<tr>
<td width="25%">last post</td>
<td rowspan="2" width="50%">hello my name is mohammad ghorbani and i am studying computer enginerring in arak</td>
<td>our friends</td>
</tr>
<tr>
<td>our statics</td>
<td>24</td>
</tr>
<tr>
<td>our social pages</td>
<td>about us</td>
</tr>
</table>
There's two primary answer categories to your question.
First, the direct answer. Think of your page as a grid. You want enough squares on the grid to be divisible by both 3 and 2. Say, 6. Then use colspan to set each column to the number of grid columns that would be needed -- so, colspan=2 for 3 columns, and colspan=3 for 2 columns.
<table border=1>
<tr>
<td colspan=6>My Website</td>
</tr>
<tr>
<td colspan=6>home, products, contact us</td>
</tr>
<tr>
<td colspan=2 style="width:33%">last post</td>
<td colspan=2 rowspan=2 style="width:33%">hello my name</td>
<td colspan=2 style="width:33%">our friends</td>
</tr>
<tr>
<td colspan=2 style="width:33%">our statics</td>
<td colspan=2 style="width:33%">24</td>
</tr>
<tr>
<td colspan=3 style="width:50%">our social pages</td>
<td colspan=3 style="width:50%">about us</td>
</tr>
</table>
The other answer category is that you should avoid using tables for your layout structure. There's a LOT of Google results for this one, and it's very opinion based, so I'll just say that generally tables should be used for data, css for layouts, and using tables for layouts may be quicker but it's less flexible.
Try this, its working well, hope it will resolve your issue.
Add this class
.column{display:inline-block; width:49%;}
<table style="width:100%" border="1px" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow" height="500px">
<caption>web design homework</caption>
<tr>
<th colspan="3">My Website</th>
</tr>
<tr bgcolor="#77E022"
height="20px" align="left" >
<td colspan="3" >
home products contact us
</td>
</tr>
<tr>
<td width="25%"> last post </td>
<td valign="top" rowspan="2" width="50%"> hello my name is mohammad ghorbani and i am studying computer enginerring in arak </td>
<td> our friends </td>
</tr>
<tr>
<td> our statics </td>
<td> 24 </td>
</tr>
<tr>
<td colspan="3" valign="top">
<div class="column"> our social pages</div>
<div class="column"> about us </div>
</td>
</tr>
</table>
I'm trying to solve a problem: it's a HTML exercise in which I must write the HTML code for a table with this design:
But I can't seem to set it straight, here's my code:
<table border>
<tr>
<td rowspan="2" colspan="2"> Batatas </td>
<td rowspan="3" colspan="2"> Couves </td>
<td> Alhos </td>
<td> Cebolas </td>
</tr>
<tr>
<td rowspan="2" colspan="2"> Alface </td>
</tr>
<tr>
<td colspan="2"> Nabos </td>
</tr>
</table>
And here's the result:
Shouldn't the rowspan="2" in the first "td" tag make the first cell larger (in height)?
What am I doing wrong?
Try this online tool here: http://html-tables.com/
and you will see how the 3 rows collapse to 2 rows visually if you are using just cell merging.
I think you need to nest tables to achieve that effect.
Actually the problem you are facing is not because of your code it is because of general rules of html table rendering, this arises because of merging of table cells
To resolve this drawback of <table> tag, I'll recommend to use <div> tag as better approach.
Try this....
<table border>
<tr>
<td rowspan="2" colspan="1"> Batatas </td>
<td rowspan="3" colspan="1"> Couves </td>
<td rowspan="1" colspan="1"> Alhos </td>
<td rowspan="1" colspan="1"> Cebolas </td>
</tr>
<tr>
<td rowspan="1" colspan="2"> Alface </td>
</tr>
<tr rowspan="1" colspan="2">
<td> Nabos </td>
</tr>
</table>
Update
As I've noticed, this can't be done using <table> tag, You can use the div approach. These div tag are able to generate your layout.
I just finished working on your problem, and I've just solved your problem using <div> tag, Have a look
<div style=" background-color: powderblue;border:1px solid black; width:410px; height:310px">
<div style="float:left;">
<div style="border:1px solid black; width:100px; float:none; height:200px">Batatas
</div>
<div style="border:1px solid black; width:100px; float:none; height:99px">Nabos
</div>
</div>
<div>
<div style="border:1px solid black;width:100px; float:left; height:301px">Couves
</div>
<div style="border:1px solid black;width:100px; float:left; height:100px">Alhos
</div>
<div style="border:1px solid black;width:100px; float:left; height:100px">Cebolas
</div>
<div style="border:1px solid black;width:202px; float:left; height:199px">Alface
</div>
</div>
</div>
Good question. The closest I got (without getting crazy with nested tables) is simply this:
<table border>
<tr>
<td colspan="2"> Batatas </td>
<td rowspan="3" colspan="2"> Couves </td>
<td> Alhos </td>
<td> Cebolas </td>
</tr>
<tr>
<td colspan="2"></td>
<td rowspan="2" colspan="2"> Alface </td>
</tr>
<tr>
<td colspan="2"> Nabos </td>
</tr>
</table>
If this doesn't work for you (and you don't want to get into complex nested html tables), then I the common belief seems to be to move away from html tables to using CSS. Obviously with CSS/divs you have much more control.
I am making a html page in which i am using table for the some items. as below image shows:
The code for the this table is as bellow:
<table border="2">
<tbody><tr>
<td width="50">
<b>
<span style="color:red">
Id
</span>
</b>
</td>
<td width="150">
<b>
<span style="color:red">
Product Name
</span>
</b>
</td>
<td width="150">
<b>
<span style="color:red">
Product Price
</span>
</b>
</td>
<td width="50"></td>
</tr>
<tr>
<td>1</td>
<td>Lamps</td>
<td><i>$3.5</i></td>
<td> Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>2</td>
<td>Table</td>
<td><i>$75.29</i></td>
<td> Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>3</td>
<td>Chair</td>
<td><i>$22.81</i></td>
<td> Edit</td>
<td>Delete</td>
</tr>
</tbody></table>
Now my problem is that why the line of the header is not completed so how to do it? I am new to html and css and I am learning it. Please need guidance. Thank you.
You have more columns in the bottom rows.
There are many solutions:
One (not so pretty) way to solve your problem would be to add more cells in the top row.
<td width="50"> </td>
<td width="50"> </td>
( http://jsfiddle.net/tCrRG/ )
Or, try to take a look at colspan and rowspan:
<td width="150" colspan="3">
<b>
<span style="color:red">
Product Price
</span>
</b>
</td>
( http://jsfiddle.net/tCrRG/1/ )
Or, add just one cell in the top row with colspan:
<td colspan="2">
</td>
( http://jsfiddle.net/tCrRG/2/ )
Empty cells are no be displayed and you could use space or html entity to put some empty content.
You could use colspan attribute to make the cell extend for 2 columns.
<table border="2">
<tbody><tr>
<td width="50">
<b>
<span style="color:red">
Id
</span>
</b>
</td>
<td width="150">
<b>
<span style="color:red">
Product Name
</span>
</b>
</td>
<td width="150">
<b>
<span style="color:red">
Product Price
</span>
</b>
</td>
<td width="50" colspan="2"> </td>
</tr>
<tr>
<td>1</td>
<td>Lamps</td>
<td><i>$3.5</i></td>
<td> Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>2</td>
<td>Table</td>
<td><i>$75.29</i></td>
<td> Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>3</td>
<td>Chair</td>
<td><i>$22.81</i></td>
<td> Edit</td>
<td>Delete</td>
</tr>
</tbody></table>
I think you want an empty cell above the Edit/Delete links and not increasing the Product Price cell.
Therefore try a colspan=2 in your empty cell
<td colspan="2" width="50"></td>
instead
<td width="50"></td>
in your first row.
The only put three cells in the header row when there are five cells in the subsequent rows. To make the third header column fill out to the right, use colspan=3:
<td width="150" colspan=3>
<b>
<span style="color:red">
Product Price
</span>
</b>
</td>
On a side note, as noted by others above, it's not good practice to use inline styling or nest style markup. Try looking into using a CSS class for your column headers:
HTML:
<td class="header_cell">
Product Price
</td>
CSS:
.header_cell {
width:150px;
color:red;
font-weight:bold;
}
I've improved your code quite a bit.
<style type="text/css">
table {
width: 400px;
}
table th{
font-weight: bold;
color: red;
}
table tr td:nth-child(3) {
font-style: italic;
}
</style>
<table border="2">
<tbody>
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Product Price</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<td>1</td>
<td>Lamps</td>
<td>$3.5</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>2</td>
<td>Table</td>
<td>$75.29</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<tr>
<td>3</td>
<td>Chair</td>
<td>$22.81</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
</table>
Explanation
Removed the used of presentational markup. Replaced with a <style> element.
Replace the header cells with appropriate <th> elements.
Added an Actions header with a colspan="2", which means it will strech for 2 columns (filling up the remaining space).
I have a table that I broke out to two tables because I need to have the scrolling functionality only span the top table. The bottom table is a textarea box. What I need to do is make the bottom table blend right into the top table to looks as if its all 1 table while maintaining 2 tables. Maybe by modifying the borders?
<form id="commentForm" name="commentForm" action="" method="post">
<ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
<ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?entryId=${entry.entryId}"/>
<table class="data_table vert_scroll_table" style="width:360px;">
<tr>
<th style="text-align: center;">User</th>
<th style="text-align: center;">Date</th>
<th style="text-align: center;">Comments</th>
</tr>
<c:forEach var="comments" items="${entry.comments}">
<tr id="id${comments.id}">
<c:choose>
<c:when test="${comments.auditable != null}">
<td>
${comments.auditable.createdBy.lastName}, ${comments.auditable.createdBy.firstName}
</td>
<td title="<fmt:formatDate value="${comments.auditable.createdDate}" pattern="${date_time_pattern}" />"><span class="mouseover_text"><fmt:formatDate value="${comments.auditable.createdDate}" pattern="${date_time_pattern}" /></span>
</td>
</c:when>
<c:otherwise>
<td colspan="1">${lastName}, ${firstName}</td>
<td title ="${comments.date}"><span class="mouseover_text">${comments.date} </span></td>
</c:otherwise>
</c:choose>
<td id="comments-${comments.id}" style="width:400px;"><pre style="width: auto;">${comments.comment}</pre></td>
</c:forEach>
</tr>
<tr id="commentRow">
</tr>
</table>
</ctl:vertScroll>
<c:if test="${lock.locked || form.entryId < 0 }">
<%-- This is the row for adding a new comment. --%>
<table class="data_table vert_scroll_table" style="width:360px;">
<td colspan="3">
You have <strong><span id="commentsCounter">${const['COMMENT_MAX_LENGTH'] - fn:length(commentForm.comment)}</span></strong> characters left.<br/>
<textarea id="comment" name="comment" rows="2" cols="125" style="width:400px;"
onfocus="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"
onkeydown="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"
onkeyup="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)" ></textarea>
<img src="../images/icon_add.gif" border="0" alt="Add"/>
</td>
</c:if>
</table>
Try rethinking your markup. This would be much more suited:
<table>
<thead>
<tr>
<th>User</th>
<th>Date</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
...
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td>
<textarea>...</textarea>
</td>
</tr>
</tfoot>
</table>
Since your code has some weird stuff in it <c:forEach var="comments" items="${entry.comments}">, I'm not gonna mess with it. But I will give the the answer in a nutshell. Disclaimer: This is how, I would do this, but probably there are better ways of doing things. Also, I'm using dotted borders for the demo.
(1) Get the width's under control
Lets make a global wrapper with set width.
<div style="width: 600px; margin: 0px auto; border: 1px dotted blue;">
miley rocks!
</div>
(2) Lets make an example table
We are now making an example table with some random list. Also lets width: 100%; to the table, so it will match the global wrapper's width.
<table style="width: 100%; border: 1px dotted green;">
<tr>
<th>Name</th>
<th>Hotness level</th>
</tr>
<tr>
<td>Miley</td>
<td>10</td>
</tr>
<tr>
<td>Selena</td>
<td>9</td>
</tr>
<tr>
<td>You</td>
<td>-3</td>
</tr>
</table>
(3) Now the second table
Lets add the form table or aka. the second table..
<table style="width: 100%; border: 1px dotted blue;">
<tr>
<td>
<textarea name="my_textarea"></textarea>
</td>
</tr>
</table>
Or why use <table>?
<div style="width: 100%; border: 1px dotted blue;">
<textarea name="my_textarea"></textarea>
</div>
(4) And now everything together
All tables and containers together. This should result two containers with the same width.
<div style="width: 600px; margin: 0px auto; border: 1px dotted blue;">
<table style="width: 100%; border: 1px dotted green;">
<tr>
<th>Name</th>
<th>Hotness leve</th>
</tr>
<tr>
<td>Miley</td>
<td>10</td>
</tr>
<tr>
<td>Selena</td>
<td>9</td>
</tr>
<tr>
<td>You</td>
<td>-3</td>
</tr>
</table>
<div style="width: 100%; border: 1px dotted blue;">
<textarea name="my_textarea"></textarea>
</div>
</div>
Not sure how much this helps. But this is the general idea for that type of problem :)