I'm using bootstrap (link) on my site, but i'm a little bit confused about the using of tables. Before bootraps all my table TD cells had dynamic widths, so the TD had a bigger width if the content was a long sentence and smaller if it was only a 11 character long text input. But right now all my TD elements has the same width and I can't find the way, how to change this...
This is my table:
<table id="table1" style="padding-top:10px;">
<tr>
<td colspan="6" style="text-align:center;">TITLE</td>
</tr>
<tr>
<td colspan="3" style="text-align:center;">SUBTITLE 1</td>
<td colspan="3" style="text-align:center;">SUBTITLE 2</td>
</tr>
<tr>
<td style="text-align:left;"><b>A.</b></td>
<td>Data title 1</td>
<td><input type="text" maxlength="11" size="11" name="input_a"></td>
<td style="text-align:left;"><b>D.</b></td>
<td>Data title 2</td>
<td><input type="text" maxlength="11" size="11" name="input_b"></td>
</tr>
...
</table>
So I want to have the "Data title X" cell have bigger width as the cell which has the input text field smaller. If I give them manually the style="width:xyzpx;" attribute it didn't change anything.
Can it be done somehow?
try to use the the span1, span2... span12 classes on table elements (or whereever needed, e.g. inputs):
<table id="table1">
<thead>
<tr>
<th colspan="6">TITLE</th>
</tr>
<tr>
<th colspan="3">SUBTITLE 1</th>
<th colspan="3">SUBTITLE 2</th>
</tr>
</thead>
<tr>
<td class='span1'><b>A.</b>
</td>
<td class='span4'>Data title 1</td>
<td class='span1'>
<input type="text" maxlength="11" size="11" name="input_a" class="span1" />
</td>
<td class='span1'><b>D.</b>
</td>
<td class='span4'>Data title 2</td>
<td class='span1'>
<input type="text" maxlength="11" size="11" name="input_b" class="span1" />
</td>
</tr>
</table>
here is the jsFiddle
ps: there is col- (col-4, col-lg-4...) class prefix in bootstrap3
Using <td width="10%"> works for me on Twitter bootstrap. Or you could add a class to the td and set the width in your stylesheet td.column{ width: 10% !important;}
Also you might want to make your tables like below for a more valid markup:
<table>
<thead>
<tr>
<td>Title 1</td>
...
</tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
</tbody>
</table>
Add the width properties to the <tr> with all 6 <td> elements.
Related
this is what table i need
I can easily get first and second row good but when i'm trying to make row third, I'm destroying row two.
I tried with width attribute and colspan but nothing work.
<table border="1px" width="100%">
<tr>
<td colspan="6">Cell 1</td>
</tr>
<tr >
<td colspan="3">Cell 2</td>
<td colspan="3" >Cell 3</td>
</tr>
<tr>
<td colspan="2">Cell 4</td>
<td colspan="2">Cell 5</td>
<td colspan="2">Cell 6</td>
</tr>
</table>
A <table> will conform to it's content by default so there's no need for each column to be equal in width. So manually assign equal column widths by assigning table-layout: fixed to <table> then an equal width for each column by either assigning each width to the <th> in the <thead> of the first <tr> or lacking that assign widths to the <td> of the first <tr> (of course td or th as a selector works as well), see example below.
table {
table-layout: fixed;
}
td {
width: 16.5%;
text-align: center;
}
<table border="1px" width="100%">
<tr>
<td colspan="6">I</td>
</tr>
<tr>
<td colspan="3">II</td>
<td colspan="3">III</td>
</tr>
<tr>
<td colspan="2">IV</td>
<td colspan="2">V</td>
<td colspan="2">VI</td>
</tr>
</table>
I need to create the template layout for the form with the input.
Should I use label tag or table tag? Which one would give the best output?
Please suggest.
They have nothing in common in your case.
Labels are used to "label" inputs with their explanation, like:
<div>
<label>Username:</label>
<input type="text" name="username" />
</div>
Tables are used to tabularize data.
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Header 1</td>
<td>Header 2</td>
</tr>
</tbody>
</table>
This approach is obsolete and NOT RECOMMENDED.
You can always use both if you wish, but there's better ways to position elements in a page.
<table>
<thead>
<tr>
<th>Username Input</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label>Username:</label>
<input type="text" name="username" />
</td>
</tr>
</tbody>
</table>
I'm trying to solve a specific problem with CSS selectors. I have the foillowing HTML:
<table class="Layout">
<tr>
<td>
<table class="Region">
<tbody>
<tr>
<th align="left">Header 1</th>
</tr>
<tr>
<td>
<table class="SelectionTable">
<tbody>
<tr>
<td>Text 1</td><td>Text 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top"></td>
<td valign="top">
<table class="Region">
<tr>
<th align="left" colspan="2">Header 2</th>
</tr>
<tr>
<td>Text 1</td><td>Text 2</td>
</tr>
</table>
</td>
</tr>
</table>
What I need to do is select the first occurence of the class "Region" within the document, and then select the th element, which contains the text "Header 1" (there will only be 1 th element within these tables). My reason for this is so i can apply a background color to this element.
I currently have this css which applies background color to the th elements of the two "Region" tables:
TABLE.Region TH {background-color: #00A5DB;}
But I want to apply background-color: #BAD80A to only the first occurence of "Region"
I know I can achieve this using javascript and I know this is an old way of arranging elements on a page, but this is a change to a company intranet with many pages, so changing just the style sheet would be by far the quickest way of acheiving this, as I don't really have the time to make sweeping changes at the moment! We use IE11 as our main browser, so the answer can be quite specific if necessary.
Any help would be appreciated!
Thanks
You can use the first-child psuedo-selector on the td and then target the th inside .region.
Here's a demo:
td:first-child .Region th {
background-color: red;
}
<table class="Layout">
<tr>
<td>
<table class="Region">
<tbody>
<tr>
<th align="left">Header 1</th>
</tr>
<tr>
<td>
<table class="SelectionTable">
<tbody>
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top"></td>
<td valign="top">
<table class="Region">
<tr>
<th align="left" colspan="2">Header 2</th>
</tr>
<tr>
<td>Text 1</td>
<td>Text 2</td>
</tr>
</table>
</td>
</tr>
</table>
/*Both work fine*/
table.Layout td:first-child th{
background: #555;
}
td:first-child th{
background: #555;
}
JSFiddle - http://jsfiddle.net/uL9uLLuf/
I have this HTML Table with headings:
<table width="100%" align="center" rules="cols" frame="box" cellpadding="5" cellspacing="5">
<tr>
<td width="" align="center"><strong><img src="/includes/images/padlock_closed.png" width="14px" /></strong></td>
<td width="20px"><strong><input type="text" class="search" name="ticketnumber" placeholder="Ticket #" size="6" onkeyup="showUser(this.value)" /></strong></td>
<td width="50px"><strong>Contact</strong></td>
<td width="200px"><strong>Summary</strong></td>
<td width="40px"><strong>Category</strong></td>
<td width="30px"><strong>Open Date</strong></td>
<td width="30px"><strong>Last Modified</strong></td>
<td width="30px"><strong>Assigned To</strong></td>
</tr>
I am creating a live PHP/MySQL Search script and i need a div to show the results but i want to show them below these headings
I tried adding:
<div id="result">
'rest of HTML Table here...'
</div>
</table>
but it doesn't display the table correctly/in the correct format
how can i make it display correctly with a div in it?
You shouldn't be using a <div>, you should have a header row that uses <th> tags (instead of using <td>'s as you currently have and then data rows that use <td> tags inside of a <tr> for each row.
Update: Example with <tbody>:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tbody>
<tr>
<td>Row 1 column 1 data</td>
<td>Row 1 column 2 data</td>
</tr>
<tr>
<td>Row 2 column 1 data</td>
<td>Row 2 column 2 data</td>
</tr>
</tbody>
</table>
You can then write css for the <tbody> tag:
tbody { color: blue; }
I am trying to format a table to look like this...
Basically i want the "Dates" row to have two columns inside it (to and from) both of them 50% the width of dates...but however when i try to format it. "To" takes all of date and "From" takes all of Name. they arent locked under "Dates"
Any help will be appreciated...Thank you
<th width="100%">Dates</th><th>Name</th><th>Age</th>
<tr>
<tr>
<td width="50%">To</td>
<td width="50%">From</td>
</tr>
</tr>
Change
<table border="1">
<tr class="heading"> <td colspan="6">Information</td> </tr >
<th width ="15" colspan="2">Dates</th><th> Name</th><th>Age</th>
<tr>
<tr>
<td width="2">From</td>
<td width="2">To</td>
<td></td>
<td></td>
</tr>
<tr>
<td width="5">
<input type="text" class="input" name="1fdate" /></td>
<td width="2">
<input type="text" class="input" name="1fdate" /></td>
</tr>
</tr>
</table>
I hope this is what you need. You use colspan and rowspan to merge the cells. When you set colspan to "2" in Date cell, it spans the row with two cells (or colums). And you set also rowspan of the cells next to Date to "2" so that they will span the rows taken by whole Date section.
<table width="600" border="0">
<tr>
<th width="200" colspan="2" scope="col">Date</th>
<th width="200" rowspan="2" scope="col">Name</th>
<th width="200" rowspan="2" scope="col">Age</th>
</tr>
<tr>
<th width="100">To</th>
<th width="100">From</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Change
<th width="100%">Dates</th>
to have colspan value. Like
<th colspan="2">Dates</th>
Replace first line with below
<th width="100%" colspan="2">Dates</th><th>Name</th><th>Age</th>