I already have a properly formatted table with a tbody thoroughly arranged with the theads. however I missed something. in a name column in the tbody, i need to divide it in half, one is a smaller box containing a number and a bigger box containing the name.
so before it's something like:
td [name here] td
into something like
td td[number] td td [name here] td td
the two should be under 1 column in the header which is a name.
any thoughts?
here is the thead:
<thead>
<tr class="table1row">
<th ROWSPAN="4"> SEQ # </th>
<th ROWSPAN="4" class="table1name"> NAME </th>
<th ROWSPAN="2" COLSPAN="4" class="table1loa" > LOA </th>
<th COLSPAN="4"> TARDINESS/UNDERTIME </th>
<tr>
<tr>
<th ROWSPAN="1" COLSPAN="3"> No. of Working Days </th>
<th ROWSPAN="2" COLSPAN="1" class="table1ex"> Period Covered </th>
<th ROWSPAN="1" COLSPAN="2"> FREQUENCY </th>
<th ROWSPAN="1" COLSPAN="2"> TOTAL </th>
</tr>
<tr>
<th> <small>VL</small> </th>
<th> <small>SL</small> </th>
<th> <small>OtherS/*</small> </th>
<th> Tardiness </th>
<th> Undertime </th>
<th> Hrs </th>
<th> Min </th>
</tr>
</thead>
You can add a table inside td. so, the tbody would comes like the following. you can style the table inside td to avoid cellspacing and cellpadding to 0.
<tbody>
<tr class="table1row">
<td ROWSPAN="4"> SEQ # </td>
<td ROWSPAN="4" class="table1name">
<table>
<tr>
<td>name</td>
<td>number</td>
</tr>
</table>
</td>
<td ROWSPAN="2" COLSPAN="4" class="table1loa" > LOA </td>
<td COLSPAN="4"> TARDINESS/UNDERTIME </td>
</tr>
<tr>
....
</tr>
<tr>
.....
</tr>
</tbody>
Note: You forgot to close the first tr in the <thead>.
is it what you need..?
<table border="1">
<tr>
<th colspan="2">Title</th>
</tr>
<tr>
<td width250px>No.</td>
<td width=100px>Name</td>
</tr>
</table>
...
Related
I am trying to print key in center of values.so that I tried to use rowspan but it's repeating n times.
here is my code
<table >
<tbody ng-repeat="(key,value) in values1" >
<tr >
<th translate> Heading 1</th>
<th translate> Heading 2 </th>
<th translate> Heading 3 </th>
<th translate> Heading 4 </th>
</tr>
<tr ng-repeat="itr in value">
<td >
{{itr .value1}}
</td>
<td >
{{itr .value2}}
</td>
<td >
{{itr .value3}}
</td>
<td rowspan="{{value.length+1}}" >
{{key}}
</td>
</tr>
</tbody>
</table>
But I am getting like this.
I need in this format
I saw JavaScript answers but not using CSS only. Is it possible, using only CSS, to reference the table cell to which the table head is meant to reference?
If I have:
<table id="required-education">
<thead>
<tr>
<th class="tbl-requirement-subheader" colspan=3>
Basic Skills (General Core) Courses - Area III
</th>
</tr>
<tr>
<th class="tbl-area-description" colspan=3>
Social/Behavioral Sciences
</th>
</tr>
<tr>
<th class="tbl-class-header">Class Name</th>
<th class="tbl-class-header">Description</th>
<th class="tbl-class-header">Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td> <!-- how do I select these next three td cells only with only CSS? -->
EMPL 999
</td>
<td>Interpersonal Relations and Professional Development</td>
<td>2</td>
</tr>
<tr>
<td class="tbl-class-decription" colspan=3>a description
2 credits
</td>
</tr>
<tr>
<td colspan=3 class="tbl-prerequisite">Prerequisite</td>
</tr>
<tr>
<td class="tbl-prerequisite-info" colspan=3>
Provisional admission
</td>
</tr>
</table>
If you know the position of the tr, you can use child selectors. In your example you could use
tbody tr:first-child td {
your styles
}
For some reason I'm struggling with this, in HTML I'm practicing with tables by making a calendar. I have a table with headers and some data and everything works okay but I end up with borders around empty cells. I only want cells with data and the table itself to have a border.
Am I approaching this wrong?
Also, is there a way to write data to a specific cell in the table using row and column values?
Here is an edited portion of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Victor's Fall 2015 Timetable</title>
</head>
<body>
<table border="1">
<tr>
<th></th>
<th> Monday </th>
<th> Tuesday </th>
<th> Wedenesday </th>
<th> Thursday </th>
<th> Friday </th>
</tr>
<tr>
<th> 11:00 </th>
<td></td>
<td></td>
<td rowspan="2">Database Lecture</td>
<td></td>
<td></td>
</tr>
<tr>
<th> 11:30 </th>
</tr>
<tr>
<th> 12:00 </th>
<td></td>
<td rowspan="2">Communications Lecture</td>
<td rowspan="3">Database Lab</td>
<td></td>
<td rowspan="2">Java Lecture</td>
</tr>
<tr>
<th> 12:30 </th>
</tr>
<tr>
<th> 1:00 </th>
</tr>
</table>
</body>
</html>
You have to use for table css border-collapse: separate;empty-cells: hide;
There is example :
table
{
border-collapse: separate;
empty-cells: hide;
}
<table border="1">
<tr>
<th></th>
<th> Monday </th>
<th> Tuesday </th>
<th> Wedenesday </th>
<th> Thursday </th>
<th> Friday </th>
</tr>
<tr>
<th> 11:00 </th>
<td></td>
<td></td>
<td rowspan="2">Database Lecture</td>
<td></td>
<td></td>
</tr>
<tr>
<th> 11:30 </th>
</tr>
<tr>
<th> 12:00 </th>
<td></td>
<td rowspan="2">Communications Lecture</td>
<td rowspan="3">Database Lab</td>
<td></td>
<td rowspan="2">Java Lecture</td>
</tr>
<tr>
<th> 12:30 </th>
</tr>
<tr>
<th> 1:00 </th>
</tr>
</table>
Update based on OP comment :
It's in css file, but, if You not using css file (?) then You can put in table after border="1" ... just add style="border-collapse: separate; empty-cell:hide;"
<table border="1" style="border-collapse: separate; empty-cells: hide;"> ... and so one rest of Your html.
If your page is Static then you can add .noborder class to empty td tag
.noborder {
border-style: none;
}
<td class='noborder'></td> won't have border
I'm not sure if this will fit in with the what you are trying to do, but one option would be to give each an id with the "coordinates"
For example:
<table>
<tr>
<td id="r0c0"> Row 0, Col 0</td>
<td id="r0c1"> Row 0, Col 1</td>
<td id="r0c2"> Row 0, Col 2</td>
</tr>
<tr>
<td id="r1c0"> Row 1, Col 0</td>
<td id="r1c1"> Row 1, Col 1</td>
<td id="r1c2"> Row 1, Col 2</td>
</tr>
<tr>
<td id="r2c0"> Row 2, Col 0</td>
<td id="r2c1"> Row 2, Col 1</td>
<td id="r2c2"> Row 2, Col 2</td>
</tr>
With more information, I might be able to give you a different/better solution, if this wouldn't work.
UPDATE: I reread the question and realized this only answers part of your question. Hope it helps anyway!!
I am trying to create a table in HTML that does both row and column spanning. I've nailed most of it, but the upper right has two blank rows that I would like to span. Here's what I have so far (it's a confusion matrix--that's an understatement):
<table>
<tr>
<th colspan="2"></th>
<th colspan="2">Class</th>
</tr>
<tr>
<th colspan="2"></th>
<td>Loyal</td>
<td>Churn</td>
</tr>
<tr>
<th rowspan="2">Pred. class</th>
<td>Predicted loyal</td>
<td>TN</td>
<td>FN</td>
</tr>
<tr>
<td>Predicted churn</td>
<td>FP</td>
<td>TP</td>
</tr>
</table>
Is that possible? Thanks for any assistance.
You mean the upper left right?
<table>
<tr>
<th colspan="2" rowspan="2"></th>
<th colspan="2">Class</th>
</tr>
<tr>
<td>Loyal</td>
<td>Churn</td>
</tr>
<tr>
<th rowspan="2">Pred. class</th>
<td>Predicted loyal</td>
<td>TN</td>
<td>FN</td>
</tr>
<tr>
<td>Predicted churn</td>
<td>FP</td>
<td>TP</td>
</tr>
</table>
http://jsfiddle.net/j0Ln2uwm/
I am trying to shrink one cell in the table, but it refuses to shring..here is my table.
<table cellspacing="0" style="position: absolute;width: 990px;margin-left: 8px;" align="center">
<thead>
<tr class='no-wrap'>
<th width="20%"></th>
<th width="10%">Our Rating</th>
<th width="10%">Users' Rating</th>
<th width="30%">Review</th>
<th width="30%">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td width="20%"></td>
<td width="10%">Our Rating</td>
<td width="10%">Users' Rating</td>
<td width="30%">Review</th>
<td width="30%">Price</td>
</tr>
</tbody>
</table>
The problem is that the review part doesnt shrink..even when I give it a lower percentage..why is that?
You have incorrect HTML syntax.
You need to wrap your table row elements in tr:
<tbody>
<tr>
<td></td>...
</tr>
</tbody>
Also you have a </th> where you should have a <td> on your 2nd row, 4th cell (Review):
<td width="30%">Review</th>