I have
<td id="Id1">Text</td>
<td id="Id2"><input type="text" value="Text" /></td>
I want that style of 2 td will be same like td1.
I tried style="border:none;", but i had text area editing or else. I just want from td2 value, but it doesn't correspond in design.
With td2 I have table cell, it can be edited. I want to have constant text showed to user, I want it not to be changed
It would be helpful if you share resources related to your issue like css code and behavior image. Anyways, this code has "=" misplaced in first line.
**<td id="Id1">Text</td>**
<td id="Id2"><input type="text" value="Text" /></td>
To make the design same, you can attach same styling classes to all the rows
You can refer this for more on tables styling, it has some good options
https://www.w3schools.com/css/css_table.asp
Related
I am making a simple newsletter layout that can only contain basic HTML but am getting caught up on formatting it properly. I have very little html experience, if I could use css I could lay this out but this is meant to be low level html that most e-mail clients can display properly.
This is a bit of code that I've done to get the image and a button (in the position of button 2) looking correct but it's getting the top and bottom buttons sitting there correctly that's the issue.
<table width="100%" style="text-align:center;">
<td>
<img src="http://localhost/temp/leftpic.png"></td>
<td>
<img src="http://localhost/temp/button.png"></td>
</table>
This is my design outcome. With the outter border being a table border centered in the middle of the page.
Is it possible to format something relatively close to this without using css?
I appreciate any help, cheers.
You CAN use css, you just have to avoid third-party files. You need to define the CSS rules inline, that is, in the style attribute, as you are already doing it for table. However, your HTML is invalid. You need to have tr elements outside your td elements and it is healthy to actively wrap your tr elements inside a tbody, which should be the child of your table.
By the way: the reason one should avoid third-party css in this case is that it might mess the design of the page of gmail/yahoo.
Something like this will start you off... This is with no CSS and no styling (other than what you have originally).
Although you state no CSS yet your first line is styling (albeit inline). Did you just mean no external file?
This is how we used to do layout before CSS, so this is using HTML tables:
<table width="100%" style="text-align:center;" border="1">
<tr>
<td width="50%">
<img src="http://localhost/temp/leftpic.png" width="390" height="480" />
</td>
<td>
<table>
<tr>
<td><input type="button" value="bn1" /></td>
</tr>
<tr>
<td><input type="button" value="bn2" /></td>
</tr>
<tr>
<td><input type="button" value="bn3" /></td>
</tr>
</table>
</td>
</tr>
</table>
Since you have a fixed height of your image on left, you can also use
<tr height="160">
Since 160 * 3 = 480 (the height of your image)
See an example here https://jsfiddle.net/on6ytfyn/
You probably want to remove the border in the first line of code too.
This might be common knowledge, but I couldn't find it... Sometimes, two radios styled exactly the same will have different size checked indicators, the black dot will be bigger in one than the other. Why is that? And how do you fix it?
Here are two screen shots of the same radio group:
EDIT:
Here's the html. I removed style just in case that was causing it, but I still get it.
<table>
<thead><tr><td>New or Maintenance</td></tr></thead>
<tbody>
<tr>
<td><input type="radio" name="rNewOrMaint" id="rNewOrMaint" value="New"/> New
<input type="radio" name="rNewOrMaint" id="rNewOrMaint" value="Maintenance"/> Maintenance</td>
</tr>
</tbody>
</table>
Things are changed now(not relevant post according to today's standards).
But consider to.
1- Change Styling where CSS is present. (external-file, inline, same file)
This question already has answers here:
Why not use tables for layout in HTML? [closed]
(66 answers)
Closed 9 years ago.
Some people believe table is the devil's spawn. Others primarily use to it to format their website. When do you draw the line on tables? When do you feel you're abusing them?
I, personally, use tables only to display data, which in most cases need a table. I've hit a brick wall, though. I need two text boxes to be aligned, would you use tables for this?
I'm thinking of doing something like this:
<table style="border: 0; border-collapse: separate; border-spacing: 10px; margin: 10px auto;">
<tr>
<td><label for="username">Username</label></td>
<td><input type="text" name="username" placeholder="Username"></td>
</tr>
<tr>
<td><label for="password">Password</label></td>
<td><input type="password" name="password" placeholder="••••••••"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" class="btn btn-large btn-info" style="float: right"></td>
</tr>
</table>
Please excuse the inline CSS, I was using it for this example.
Would you draw the line there? Am I crossing this imaginary line? What would you do?
To align things, I would use either the <div> element or, if that fails, absolute positioning. Also try display:inline-block on the div element. Why won't they line up? What have you tried? Tables should never be used for formatting. That is an awful practice which tables weren't designed for. Only ever use tables if you are displaying tabular data. Otherwise see above.
Tables should be used to represent tabular data. Divs are divisions or sections and should be used to group block-elements. Spans are useful when you want to group inline-elements.
I personally think using tables for layout in regards to forms is OK, especially in the case of some super complicated form - Such as this one: http://www.wolfhair.com/consultation-options/
My reasoning behind this is that if the data that was being inputted into the text fields was actual text and not a text field, it would in fact appear to be tabular data. In fact, if you were to store this information, it would be placed into a table like structure in order to be then pulled from later.
As a demonstration, take for instance your very example. If it were filled out and the text fields were actual data results.
<table border="1">
<tr>
<td><label for="username">Username:</label></td>
<td>MyUsernameRox</td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td>M0stSecurePasswordEv3r</td>
</tr>
</table>
http://jsfiddle.net/sGq2Q/
Outside of using it to organize and arrange a form, it should not be used for layout.
Traditionally, I always lay out forms by styling each property, but I have read a lot lately about styling forms using a table. My problem is that with a table, when one cell is rather large, all other cells in that column become the same width. When editing them, the problem I end up with is either large gaps between input fields due to a large cell placed above them or, when you resize the screen, things get too close for comfort.
I tried setting the <td> widths individually but that doesn't work. I created a fiddle to see if someone could get me going in the right direction.
Thank you all so much in advance!
http://jsfiddle.net/uFwkd/
The table in the jsfiddle (which seems to be what the question is really about) contains rows with different numbers of cells, e.g.
<tr>
<td><input type="text" name="street" id="street" value="" size="20" /></td>
</tr>
<tr>
<td>City:</td>
<td>State:</td>
<td>Zip:</td>
</tr>
This causes rather unpredictable rendering in practice.
You could make the structure more appropriate by ensuring that all rows have the same number of slots (3, in this case), by using the colspan attribute on cells (on the first row above, with <td colspan="3">. This would require some artificial decision for the row containing two cells: one of them would need to span two columns.
This would be somewhat unnatural (cells in a column would not really be related to each other, just placed in the same column) and would imply accessibility problems. A better tabular structure for a form has one row for each input control (one field, such as one input element), with label in one column, the control itself in another, so you would start with something like
<table>
<tr><td><label for="org">Organization name:</label></td>
<td><input type="text" name="org" id="org" value="" size="20" /></td>
</tr>
There is debate between using div and table to layout a form. There are some rules of thumb about this:
Table only for display
Use div as a form layout
In your case, you can consider transforming your table into a div.
EDIT: A few months later I attempted this again using the same syntax I had tried the first time (posted below). For some reason, it worked! Maybe something other than my syntax was causing the ineffectiveness... END EDIT
I've been searching forums for a couple of hours now trying to find a solution to this problem, but none of the things I've tried work.
I'm using VBA to automate the process of creating a survey on SurveyMonkey. So far I've been able to:
Log into my account,
Click several hyperlinks to create a new response collector,
Name the collector,
Go to the collector settings,
And, select three of four radio buttons to change collector settings.
The issue isn't that I can't select the radio buttons; my code selects the first three buttons just fine. What puzzles me is that the fourth button doesn't change! I use the same process for each button, so I can't figure out why the last button won't select.
Here's the section of my code:
objIE.Document.getElementById("rdlResponseType_1").Click 'Allow multiple responses = Yes
objIE.Document.getElementById("rdlResponseEdit_1").Click 'Allow Responses to be Edited = Yes
objIE.Document.getElementById("rdlThankyou_1").Click 'Display a "Thank You" page? = Yes
objIE.Document.getElementById("rdlCompleteOpt_1").Click 'Survey Completion = Close Window
This is the HTML for the radio buttons:
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tr id="CompleteOptDesc">
<td style=""> </td>
<td>After the respondent leaves the survey:</td>
</tr>
<tr id="CompleteOptItems">
<td style=""> </td>
<td align="left" nowrap="nowrap" valign="top">
<table id="rdlCompleteOpt" class="Clean radioList" OnClick="radioToggle('rdlCompleteOpt', '0', 'panLink');" name="rdlCompleteOpt" border="0" style="white-space: nowrap">
<tr>
<td><span style="white-space: nowrap"><input id="rdlCompleteOpt_0" type="radio" name="rdlCompleteOpt" value="0" checked="checked" /><label for="rdlCompleteOpt_0"><b>Redirect</b> to your own webpage.</label></span></td>
</tr><tr>
<td><input id="rdlCompleteOpt_1" type="radio" name="rdlCompleteOpt" value="2" /><label for="rdlCompleteOpt_1"><b>Close Window</b></label></td>
</tr>
</table>
Here is the code for the toggle section of the radio:
<td width="65%" valign="top">
<div id="panLink" style="DISPLAY:inline">
<div class="URLinfo">
<b>Enter a URL</b> to jump to upon leaving the survey:<br />
<div title="REQUIRED: Enter URL (255 character max)" style="padding:4px 0 2px 0;">
<input name="txtWebLink" type="text" value="http://www.surveymonkey.com/" maxlength="255" size="40" id="txtWebLink" class="RQR opaque" />
</div>
<span class="tip">Example: <u>http://www.mysite.com/home.html</u></span>
</div>
</div>
</td>
Any suggestions would be very appreciated!
There's a couple things to consider:
When are you calling this code? OnNavigate or DocumentComplete? It may be that the object doesn't exist yet. You can check to see if it does by using a breakpoint and adding a watch for the expressions
objIE.Document.getElementById("rdlCompleteOpt_1")
Use OnDocumentComplete to ensure the HTML components exist
It's possible the way you are calling the click function is causing an issue. Try this
Call objIE.Document.getElementById("rdlCompleteOpt_1").Click()
I doubt that it is likely to have much impact but I like to verify everything.
Isolate the cause of the issue by removing the 'layers'. Can you accomplish this using pure JavaScript that's invoked from the IE dev tools (F12) JavaScript console?
If no then the issue is with how you're interacting with the page elements. If yes then we need to figure out what it is with the VBA intaction is causing an issue. Again see #2 as it is likely the cause of the issue.
Also, does the issue occur if you change the HTML order of the elements? What if you call it this way?
objIE.Document.getElementById("rdlCompleteOpt_1").Click 'Survey Completion = Close Window
objIE.Document.getElementById("rdlResponseType_1").Click 'Allow multiple responses = Yes
objIE.Document.getElementById("rdlResponseEdit_1").Click 'Allow Responses to be Edited = Yes
objIE.Document.getElementById("rdlThankyou_1").Click 'Display a "Thank You" page? = Yes
Does it work then or does the "last" item fail?
Highly unlikely to be the cause but the HTML supplies is missing the code to close cell, row and table.
</tr>
</table>
<!-- missing -->
</td>
</tr>
</table>
While not the specific answer to your question I believe this may be inline with the intent of your post. Since you want to manage a surveymonkey collector take a look at the SurveyMonkey API here as using an API gives you quite a few benefits.
you don't have to rely on user elements which may change or be changed outside of your control
you can use a controlled and "contracted" interface to manage the information which covers you for any future changes (assuming they don't deprecate and stop supporting the API)