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!!
Related
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 want to create a table like shown in the image using HTML. How to do?
User colspan="3" attribute if you need marge two cells into one .
w3schools
th, td {
background: #ddd;
padding: 2px;
}
<table>
<tr>
<th> </th>
<th>9AM</th>
<th>10AM</th>
<th>11AM</th>
<th>12AM</th>
</tr>
<tr>
<td>Mon day</td>
<td colspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>tuesDay</td>
<td scope="col" colspan="3"> </td>
<!-- The following two cells will appear under the same header -->
<td>Col 1</td>
</tr>
</table>
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
}
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>
...
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>