Why is the following html code not working for usig colspan in the table?
<html>
<head>
<title>table</title>
</head>
<body>
<table height="200" width="200" border="1">
<tr>
<td colspan="9">EXAM SCHEDULE</td>
</tr>
<tr>
<td colspan="3">D</td>
<td colspan="4">T</td>
<td colspan="2">V</td>
</tr>
</table>
</body>
</html>
This is what i get from the code :
What is the expected output? The code has no syntax errors.
Table cells can span across more than one column or row. The attributes COLSPAN ("how many across") and ROWSPAN ("how many down") indicate how many columns or rows a cell should take up.
So, EXAM SCHEDULE as specified with colspan=9 will use 9 columns. There will be total 9 columns as per the code.
There is no major error in your html except some unwanted html, body tags are there which I have removed, but you could be able to see the difference only after adding more columns into it like the below html code:
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<title>table</title>
</head>
<body>
<table height="200" width="200" border="1">
<tr>
<td colspan="9">EXAM SCHEDULE</td>
</tr>
<tr>
<td colspan="3">D</td>
<td colspan="4">T</td>
<td colspan="2">V</td>
</tr>
<tr>
<td>t1</td>
<td>u1</td>
<td>g1</td>
<td>t2</td>
<td>u2</td>
<td>g2</td>
<td>u2</td>
<td>t4</td>
<td>u4</td>
</tr>
</table>
<script>
$(function(){
$(document).on("click",".seat",function(){
alert($(this).parent().find('.green').length);
});
});
</script>
</body>
</html>
Related
How can I add text to a cell using d3?
I have a function with the code that needs to be added and I'm calling this in the body of the html page. I have the following code as an example but it doesn't seem to be working.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href ="styles.css">
<script type="text/javascript" src="http://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
function t1(){
d3.select("td#target").text("14");
}
</script>
</head>
<body onload="t1()">
<table>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
</tr>
<tr>
<td>Tom</td>
<td>Smith</td>
<td is="target"> </td>
</tr>
</table>
</body>
</html>
Any ideas on how to make this work.
It is a small mistake..
change <td is="target">into <td id="target">
I found the solution. I figured out I had just a typo
<td is="target"> </td>
Should be
<td id="target"> </td>
This question already has answers here:
How to get table cells evenly spaced?
(8 answers)
Closed 6 years ago.
I have an HTML Table that is not being displayed properly. Here is a picture of the issue:
My issue is that the divider between "Current Number of cars is" and "current number of family members is" is not centered in between the two buttons. How can I go about centering this?
I have tried adding spaces after the "Current number of cars is" by doing the following:
<TD ALIGN="center"><p id="t_4"><pre> Curent Number of Cars is </pre><p id="t_red">6</p></p></TD>
but this changes the font on my text.
Here is the page source
<HTML>
<HEAD>
<LINK REL="stylesheet" HREF="/edartcss/edart_style.css" TYPE="text/css">
<LINK REL="stylesheet" HREF="/edartcss/button.css" TYPE="text/css">
<LINK REL="stylesheet" HREF="/edartcss/CalendarControl.css" TYPE="text/css">
<TITLE>eDART Generation Tickets</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="Refresh" CONTENT="30;URL=/edartsql/john_package.loadpage">
<SCRIPT language="JavaScript" src="/edartjs/geneneration.js"></SCRIPT>
<SCRIPT language="JavaScript" src="/edartjs/CalendarControl.js"></SCRIPT>
</HEAD>
<body OnLoad="placeFocus()">
<TITLE>August Vehicle Directory</TITLE>
<TABLE border=1 align=center>
<TR>
<TD ALIGN="center" COLSPAN="5"><p id="t_1">August Family Vehicle Listing Directory</p></TD>
</TR>
<TR>
<TD ALIGN="center" COLSPAN="11"><p id="t_msg">This page lists all of the vehicles and their owners within the August family.
Please see the table below for the latest listing.</p></TD>
</TR>
<TR>
<td align =center colspan=2>
<TABLE border>
<TR>
<TD ALIGN="center"><p id="t_b">Owner</p></TD>
<TD ALIGN="center"><p id="t_b">Make</p></TD>
<TD ALIGN="center"><p id="t_b">Model</p></TD>
<TD ALIGN="center"><p id="t_b">Year</p></TD>
<TD ALIGN="center"><p id="t_b">Additional Specs</p></TD>
</TR>
<TR>
<TD ALIGN="center"><p id="t_i">John, August</p></TD>
<TD ALIGN="center"><p id="t_i">Honda</p></TD>
<TD ALIGN="center"><p id="t_i">Civic</p></TD>
<TD ALIGN="center"><p id="t_i">2012</p></TD>
<TD ALIGN="center"><div id="s_button_1" >Vehicle Details</div></TD>
</TR>
</TABLE>
</td>
</TR>
<TR>
<TD ALIGN="center"><p id="t_4">Curent Number of Cars is <p id="t_red">6</p></p></TD>
<TD ALIGN="center"><p id="t_4">Curent Number of Family Members is <p id="t_red">2</p></p></TD>
</TR>
<TR>
<td align =center colspan=2>
<TABLE >
<TD ALIGN="center"><div id="s_button_1" >Add Vehicle</div></TD>
<TD ALIGN="center"><div id="s_button_1" >Add Member</div></TD>
</TABLE>
</td>
</TR>
</TABLE>
</BODY>
</HTML>
Add style="width:50%;" to the elements.
Here is an example: http://codepen.io/markhkr/pen/XdxbrP
<TD ALIGN="center" style="width:50%;"><p id="t_4">Curent Number of Cars is <p id="t_red">6</p></p></TD>
<TD ALIGN="center" style="width:50%;"><p id="t_4">Curent Number of Family Members is <p id="t_red">2</p></p></TD>
You can add a columns attribute to the table to specify the widths at 50% each line so:
<table columns="50%,50%">
But be aware that using tables for this kind of layout is considered passée. Generally you would have each of the side-by-side elements as floating <div>s with a 50% width.
Give "cars" an id of left, and "family members" an id of right.
Set the with of each id to 50%, and use text-align: center.
I have to make a table using the table element in HTML. The table should look like this: required Table image
But at the moment my table looks like this: My Table image
I've tried to fix it numerous times. but I just can not figure it out.
heres my HTML code aswell.
Please help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Page header</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td colspan=4>Page Header </td>
</tr>
<tr>
<td rowspan=2>Menu: </td>
<td> Advertisement Space </td>
<td> Blog Links </td>
</tr>
<tr>
<td> Main Content Area</td>
</tr>
<tr>
<td colspan=4>Footer </td>
</tr>
</body>
</html>
The HTML below creats a table like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Page header</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td colspan=4>Page Header </td>
</tr>
<tr>
<td rowspan=2>Menu: </td>
<td colspan=2> Advertisement Space </td>
</tr>
<tr>
<td> Main Content Area</td>
<td> Blog Links </td>
</tr>
<tr>
<td colspan=4>Footer </td>
</tr>
</body>
</html>
What you need to change:
Set colspan for the "Advertisment Space"
Move "Blog Links" to the same row as "Main Content Area"
Although I must say that tables are absolutely not state of the art when it comes to designing a website layout. <table> is used do display data (like a list or, well, a table).
<div> and <span> should be used to apply a layout to a website
Just correct with:
<td rowspan="2"> Blog Links </td>
Side comment: you seem to be building the layout of the page using html tables. Bad idea, read this.
Also, html attributes, to be correct, require quotes, i.e. <elem attrib="value">
Close off your table:
<table border="1" width>Table data...</table>
Give menu rowspan 4 and change accordingly.
Can anybody explain the behaviour of the following html page, which is an extract of a legacy application?
My question is: between "My sample text here T1" and "My sample text here T2", the rendering is totally different, and the only difference is that there is a parent table around the second one.
My understanding of html is that table is a block level element that computes its width depending on the content, and I do not understand why there is a such difference in the rendering of this sample.
If anybody knows why and this behaviour can be controlled without forcing the width or using white-space:nowrap, I would be really thankful.
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<!-- rendering is correct -->
<table>
<tbody>
<tr>
<td style="width: 30%"> </td>
<td style="width: 35%">My sample text here T1</td>
<td style="width: 35%"> </td>
</tr>
</tbody>
</table>
<!-- Problem is here : addition of a parent table. -->
<table><tr><td>
<table>
<tbody>
<tr>
<td style="width: 30%"> </td>
<td style="width: 35%">My sample text here T2</td>
<td style="width: 35%"> </td>
</tr>
</tbody>
</table>
</td></tr></table>
</body>
</html>
And the rendering :
The answer is that the outer td in T2 does not explicitly know its width and neither table, tr, nor td are block elements. See this fiddle: https://jsfiddle.net/fordareh/u6j64tso/
Basically, you need the outer table to have an explicit width:
<table style="width: 100%"><tr><td>
<table>
<tbody>
<tr>
<td style="width: 30%"> </td>
<td style="width: 35%">My sample text here T2</td>
<td style="width: 35%"> </td>
</tr>
</tbody>
</table>
</td></tr></table>
table shrinks on its content, if nested, inline content might shrink too since parent has no width specified for child to use.
you may remove width style and maybe use a block element so it can receive width, min-width, max-width without interfering with the table layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<!-- rendering is correct -->
<table>
<tbody>
<tr>
<td style="width: 30%"> </td>
<td style="width: 35%">My sample text here T1</td>
<td style="width: 35%"> </td>
</tr>
</tbody>
</table>
<!-- addition of a parent table. -->
<table><tr><td>
<table>
<tbody>
<tr>
<td> </td>
<td>My sample text here T2</td>
<td> </td>
</tr>
</tbody>
</table>
</td></tr></table>
<!-- addition of a parent table. -->
<table><tr><td>
<table>
<tbody>
<tr>
<td> </td>
<td><p>My sample text here T3</p></td>
<td> </td>
</tr>
</tbody>
</table>
</td></tr></table>
</body>
</html>
I have trouble finding the right way to add cells into columns: Here is what I want to do:
A fiddle you get from : http://jsfiddle.net/AKrB3/
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table style="margin-top: 40px" width="600" height="358" cellspacing="0" cellpadding="2" align="center" border="1">
<tr>
<td align="center">fasfg1
</td>
<td width="42"></td>
<td align="center">fasfg2
</td>
</tr>
</table>
</body>
</html>
Try this, with rowspan.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table style="margin-top: 40px" width="600" height="358" cellspacing="0" cellpadding="2" align="center" border="1">
<tr>
<td align="center">fasfg1
</td>
<td width="42" rowspan="3"></td>
<td align="center" rowspan="3">fasfg2
</td>
</tr>
<tr>
<td>zroizj</td>
</tr>
<tr>
<td>zroizj</td>
</tr>
</table>
</body>
</html>
Note that it may be really hard to maintain this code if you want to add more rows in the left column in the future. It may be preferable to use 2 different tables.
I would make one more table inside the left row and add the rows to the new table
This is not a really great way to do it, but if you do it in one table, then you need separate rows for each cell and one for the rest of the items. To make the other side the same size, you must use rowspan. When you add a column, you would need to update the rowspan by one and make a new of the specific size you are inserting and remove it from the height specified by the last .
The better way to do this is by using separate tables for each band or a table inside a table.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table style="margin-top: 40px" width="600" height="358" cellspacing="0" cellpadding="2" align="center" border="1">
<tr style="height:10px">
<td align="center">fasfg1</td>
<td width="42" rowspan="4"></td>
<td align="center" rowspan="4">fasfg2
</td>
</tr>
<tr style="height:10px">
<td align="center" height="5%">fasfg1</td>
</tr>
<tr style="height:10px">
<td align="center" height="5%">fasfg1</td>
</tr>
<tr style="height:100px">
<td align="center">fasfg1</td>
</tr>
</table>
</body>
</html>