line underneath HTML table: caption or tfoot - javascript

I want to show an HTML table with a caption on top and a horizontal line underneath, like this:
I see two ways to implement this, but both have their respective downsides. First method is like this:
<table>
<caption><b>***** yada yada yada *****</b></caption>
<tr>
<th></th>
<th>lorem</th>
<th>ipsum</th>
<th>dolor</th>
<th>sit</th>
<th>amet</th>
</tr>
<tr>
<th>hello</th>
<td>note</td>
<td>the</td>
<td>hori</td>
<td>zontal</td>
<td>line</td>
</tr>
<tr>
<th>world</th>
<td>under</td>
<td>neath:</td>
<td>2nd</td>
<td>caption??</td>
<td>tfoot??</td>
</tr>
<tfoot>
<tr>
<td colspan="6">
<hr>
</td>
</tr>
</tfoot>
</table>
What I don't like about this is that I have to use the colspan attribute; you know, the real table is generated from data, and finding out the colspan means some extra JavaScript I have to write, if I do it like this.
The other way would be like this:
<table>
<caption><b>***** yada yada yada *****</b></caption>
<caption style="caption-side: bottom;">
<hr>
</caption>
<tr>
<th></th>
<th>lorem</th>
<th>ipsum</th>
<th>dolor</th>
<th>sit</th>
<th>amet</th>
</tr>
<tr>
<th>hello</th>
<td>note</td>
<td>the</td>
<td>hori</td>
<td>zontal</td>
<td>line</td>
</tr>
<tr>
<th>world</th>
<td>under</td>
<td>neath:</td>
<td>2nd</td>
<td>caption??</td>
<td>tfoot??</td>
</tr>
</table>
By using caption instead of tfoot, I don't have to give the colspan, which is good. But the table already has a caption, and the second caption is not compliant with the spec.
The second method is simpler and looks just fine in all browsers I tested with, so I'm preferring that - browsers seem to be able to handle lot's of 'meaningful violations' of the spec. But it doesn't feel 100% comfortable to be 'naughty' like that.
Q1: Is there a way to do this without tfoot and colspan, while being spec compliant at the same time?
Q2: do the above methods really look the same in all browsers?

Q1: Is there a way to do this without tfoot and colspan, while being
spec compliant at the same time?
Yes, do your styling with CSS. HTML is a semantic language.
Q2: do the above methods really look the same in all browsers?
In any modern, standards compliant client, yes they will.
Also, the <b> element shouldn't be used for purely stylistic purposes. It's a semantic tag to invoke emphasis. Styling should be done with CSS (shown below).
table { border-bottom: 1px solid black; }
caption { font-weight:bold; }
<table>
<caption>***** yada yada yada ****</caption>
<tr>
<th></th>
<th>lorem</th>
<th>ipsum</th>
<th>dolor</th>
<th>sit</th>
<th>amet</th>
</tr>
<tr>
<th>hello</th>
<td>note</td>
<td>the</td>
<td>hori</td>
<td>zontal</td>
<td>line</td>
</tr>
<tr>
<th>world</th>
<td>under</td>
<td>neath:</td>
<td>2nd</td>
<td>caption??</td>
<td>tfoot??</td>
</tr>
</table>

Q2: do the above methods really look the same in all browsers?
No, they don't. The hr in tfoot is a couple of pixels shorter compared to the hr within caption, the line thickness of '1px solid black' is not really the same line thickness as that of hr, and also, the vertical spacing varies by a few pixels (not many) between the 3 solutions.
But yes, I agree, you should do this with CSS, and not use hr at all.

<!DOCTYPE html>
<html>
<head>
<title>HTML colspan Attribute</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 6px;
text-align: center;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">Table Design</h1>
<h2>HTML colspan & Rowspan Attribute</h2>
<table>
<tr>
<th colspan="2">Name</th>
<th colspan="2">Phone</th>
<th colspan="2">Address</th>
</tr>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Home</td>
<td>Office</td>
<td>Present</td>
<td>Parmanent</td>
</tr>
<tr>
<td>Sayeed</td>
<td>Dev</td>
<td>017597383</td>
<td>01784763</td>
<td>BD</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Sayeed</td>
<td>Dev</td>
<td colspan="2">017597383</td>
<td colspan="2">USA</td>
</tr>
<tr>
<td rowspan="2">Sayeed</td>
<td >Dev</td>
<td >017597383</td>
<td >017597383</td>
<td rowspan="2">USA</td>
<td >Dhaka</td>
</tr>
<tr>
<td>Dev</td>
<td >017597383</td>
<td >017597383</td>
<td >Dhaka</td>
</tr>
</table>
</center>
</body>
</html>

Related

Formatting cells in a table, without repeating the same code hundreds of times?

I am working on a display page for a lot of data. some of the data is a short string, some of it is a long string(>200char) and some is numbers. My issue is this: When i create a a table and set its style, how do i make it so the style of the table sets a fixed size for the cells in that table, without manually setting it for each individual cell, becuase i have over 50 tables with 10 rows or more and each one has multiple cells.
I am asking this because the data I am entering seems to be resizing the cells to make it fit, and it crushes the adjacent cells, which cant happen.
Here is a sample of what i want:
<table style={table_style_sub}>
<tr>
<td><b>Client Name:</b></td>
<td>{client2}</td>
</tr>
<tr>
<td><b>Location:</b></td>
<td>{client2Location}</td>
</tr>
<tr>
<td><b>Phone:</b></td>
<td>{client2Phone}</td>
</tr>
<tr>
<td><b>Emails:</b></td>
<td>{client2Email}</td>
</tr>
<tr>
<td style={cell_format}><b>Details:</b></td>
<td>{client2Service}</td>
</tr>
</table>
this is my table for example. Here is the formatting:
var table_style_sub={
margin: 'auto',
width: '400px',
marginBottom: '15px',
border: '1px dotted black'
}
is there any way to add to this table_style_sub to make every <td> of the appropriate table have a width of 'Xpx' without manually doing typing <td style={{width:"Xpx}}> over 300 times.
Here is the whole code if you want to see it to get an idea of how many lines i actually have: http://pastebin.com/6rzRz2Vj
You could try something like this in javascript itself,
In your code there seems to be a div with an id="messagesDiv" enclosing the table so could use that id and fetch the tds and then set their style to width in the javascript as shown below,
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="angular.min.js"></script>
</head>
<body>
<form class="index-form" name="LoginForm">
<div class="card__supporting-text mdl-color-text--white-600" id="messagesDiv">
<h3>Contact Information</h3>
<table style={table_style}>
<tr>
<td><b>Legal Name: </b></td>
<td>{legalEntity}</td>
</tr>
<tr>
<td><b>Operating Name:</b> </td>
<td>{operatingName}</td>
</tr>
<tr>
<td><b>Role: </b></td>
<td>{string_role[role]}</td>
</tr>
<tr>
<td><b>Address 1: </b></td>
<td>{address1}</td>
</tr>
<tr>
<td><b>Address 2: </b></td>
<td>{address2}</td>
</tr>
<tr>
<td><b>City:</b> </td>
<td>{city}</td>
</tr>
<tr>
<td><b>Province:</b></td>
<td>{province}</td>
</tr>
<tr>
<td><b>Country: </b></td>
<td>{country}</td>
</tr>
<tr>
<td><b>Postal Code:</b></td>
<td>{postalCode}</td>
</tr>
<tr>
<td><b>Phone:</b></td>
<td>{phone}</td>
</tr>
<tr>
<td><b>Fax:</b></td>
<td>{fax}</td>
</tr>
<tr>
<td><b>Email:</b></td>
<td>{email}</td>
</tr>
<tr>
<td><b>Admin Contact:</b></td>
<td>{adminContact}</td>
</tr>
<tr>
<td><b>Techncal Contact:</b></td>
<td>{technicalContact}</td>
</tr>
</table>
</div>
</form>
<script>
var div=document.getElementById("messagesDiv");
var tds=div.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
tds[i].style.width='200px';
}
</script>
</body>
</html>

changing the disabled font color

THis is a list table, and one list is disabled. As you guys know, the font color is a gray when it's disabled. I am using IE9, and I want to change the font color. Does anyone know how to change the disabled font color???
here is my code:
<table id="list" cellspacing="0" border="1" style="border-collapse: collapse;">
<tr disabled bgcolor =#EAEAEA style="color:#ea0000;">
<td>name</td>
<td>email</td>
</tr>
<tr class="nameMail" onclick='op()'>
<td id="a">&nbsp</td>
<td id="b">&nbsp</td>
</tr>
</table>
Your code is invalid.
You would do something like this:
input[type="text"]:disabled
{
color:#ea0000;
}
Also, 'disabled' selector is supposed to be used mostly with form elements and controls.
If you want you can use a button within the tds like so:
<table id="list" cellspacing="0" border="1" style="border-collapse: collapse;">
<tr bgcolor="#EAEAEA" style="color:#ea0000;">
<td><button disabled>name</button></td>
<td><button disabled>email</button></td>
</tr>
<tr class="nameMail" onclick='op()'>
<td id="a">&nbsp</td>
<td id="b">&nbsp</td>
</tr>
</table>
You would also, need to update the css like so to get rid of the button border.
button{
border:0;
color:#ea0000;
}
button:disabled
{
color:#000;
}

jQuery: Position of Images inside a HTML Table

Say I have a table:
<table id="table1" border="1">
<tr>
<td id='id1' style="width:200px"></td>
<td id='id2' style="width:200px">2222</td>
</tr>
</table>
I am using following code to add images to these table cells
$('#id1').append('<img src=images/image1.jpg />');
$('#id1').append('<img src=images/image2.jpg />');
$('#id1').append('<img src=images/image3.jpg />');
$('#id2').append('<img src=images/image4.jpg />');
Now what I want to achieve is this:
1. for cell "id2", i want the image always align to the right so it's not next to the text.
2. for cell "id1", since those 3 images has different sizes (24x24, 32x32, 24x24), i don't want them to be next to each other. what I want is that as if there are 3 small cells in that cell, each with size 32x32, and put those images into those small cells one by one.
I am not good at html or javascript. is it possible to do so?
CSS
#id2 img { float: right; }
HTML
<table id="table1" border="1">
<tr>
<td id='id1' style="width:200px"><table><tr></tr></table></td>
<td id='id2' style="width:200px">2222</td>
</tr>
</table>
Javascript
$('#id1').find('tr').append('<td><img src=images/image1.jpg /></td>');
...
Based off item #2 I'd say you're not done defining your table. You need to add a nested table in #id2 (the merits of this approach can be debated later).
So your table would be
<table>
<tr>
<td id="id1"></td>
</tr>
<tr>
<td>
<table>
<tr>
<td id="id1a"></td>
<td id="id1b"></td>
<td id="id1c"></td>
</tr>
</table>
</td>
</tr>
</table>
From there you'd append your images to the sub-cells.

HTML column width changes when table row is hidden

I am a relative newcomer to web programming, so probably I am making some obvious mistake here.
When I am trying to hide a row in a table from javascript like rows[i].style.display = 'none', the table layout is getting completely broken. Originally, the cell content was getting wrapped, and the table width was getting shrunk. I then added style="table-layout: fixed" in the table tag and style="white-space:nowrap" in each td. This stopped the line wrapping, but still the content was not aligned on a line. Cells started moving left if there is space and column width varied from one row to another. I then added a fixed width to each of the th and td element and also to the div containing the table. Still the problem remained.
My current HTML is something like the following.
<div style="width: 300px">
<table id="errorTable" width="100%" cellpadding="5" cellspacing="2" style="table-layout: fixed">
<tr id="HeaderRow">
<th style="width: 100px;">Header 1</th>
<th style="width: 50px;">Header 2</th>
<th style="width: 150px;">Header 3</th>
</tr>
<tr id="DetailRow1">
<td style="white-space:nowrap; width: 100px;">Data 1_1 in Row 1</td>
<td style="white-space:nowrap; width: 50px;">Data 1_2 in Row 1</td>
<td style="white-space:nowrap; width: 150px;">Data 1_3 in Row 1</td>
</tr>
<tr id="DetailRow2">
<td style="white-space:nowrap; width: 100px;">Data 2</td>
<td style="white-space:nowrap; width: 50px;">Data 2</td>
<td style="white-space:nowrap; width: 150px;">Data 2</td>
</tr>
<tr id="DetailRow3">
<td style="white-space:nowrap; width: 100px;">Data 3_1</td>
<td style="white-space:nowrap; width: 50px;">Data 3_2</td>
<td style="white-space:nowrap; width: 150px;">Data 3_3</td>
</tr>
</table>
</div>
When the table is displayed first time, the columns are aligned properly, with width 100, 50 and 150 px respectively. But if a row, say the second one is hidden, the cell width of the remaining two displayed rows are no longer fixed at 100, 50 and 150 and data is no longer aligned vertically. Please note that the overall table width remains 300 px. Data in each cell moves left if there is available space and the additional space is used by the last, in this case, third column.
The following post was helpful but did not solve my problem fully, as you can see.
Hiding table rows without resizing overall width
Any help will be most welcome.
The problem is the display type that you use to make the table-row visible.
To hide a table-row use display="none"
To show a table-row use display="table-row"
I did a sample so you can see these in action.
function show(){
document.getElementById('trB').style.display='table-row';
}
function hide(){
document.getElementById('trB').style.display='none';
}
#import url("https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css");
table{
border: 1px solid #ccc;
}
<table id="myTable" class="table table-striped table-hover">
<thead>
<tr>
<td>#</td>
<td>Letter</td>
</tr>
</thead>
<tbody>
<tr id="trA">
<td>1</td>
<td>A</td>
</tr>
<tr id="trB">
<td>2</td>
<td>B</td>
</tr>
<tr id="trC">
<td>3</td>
<td>C</td>
</tr>
</tbody>
</table>
<button id="showB" onclick="show()">show B</button>
<button id="hideB" onclick="hide()">hide B</button>
Hope this could help who are struggling with the same problem.
Instead of using display: none; I used visibility: collapse; for the hidden rows. This still keeps the width of the columns and the whole layout.
I had the same problem: I tried to hide a column by elem.style.display="none" but when showing again the layout was broken. This display-style worked for me:
columns.item(i).style.display = "table-cell";
Always fix the width of your columns. Would that sole your problem?
.myTable td{ width:33% !important; }
Ideally, you should also enclose header and body sections using thead and tbody
<table>
<thead>
<tr> ... </tr>
</thead>
<tbody>
.
.
.
</tbody>
</table>
I'm having the same problem. I threw a span inside of each table to see if I could force the width and it seems to work. It's ugly though.

Style on colgroup not working

I have following colgroup not working properly.
<colgroup class="" style="background-color:#FF0000;"></colgroup>
Please see this jsfiddle. My styles on colgroup not working.
Most properties that you can set on colgroup won’t have an effect, since by definitions, table cells inherit properties from tr elements (rows), not columns or column groups (to the extent that there is inheritance).
Set, in CSS, the properties directly on the cell elements. For example, to set the background color of the first two columns, assuming that only td markup is used for the cells, use
td:first-child, td:first-child + td {
background: #f00;
color: #fff;
}
Here is an example of colgroup:
<html> <body>
<table width="100%" border="1"> <colgroup style="background-color:#22FF22;"></colgroup> <colgroup style="background-color:#888888;"></colgroup> <colgroup style="background-color:#FF0000;"></colgroup>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>
</body> </html>
if your code is bit different show us the more code to repy appropriately..

Categories