I am new to html, is there a way to create columns in plain html, without using CSS, Bootstrap, Jquery or any other frameworks.?
You can use the HTML table element if you do want to use any CSS. See below
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</table>
Source
If you want to define columns by using div's , then you have to use CSS to allot space. If you strictly oppose CSS then as #Raja Khoury said you have to use table.
Or else div along with CSS :
<div id="wrap" style="width:600px; margin:0 auto;">
<div id="left_col" style="float:left; width:300px;">
LEFT
</div>
<div id="right_col" style="float:right; width:300px;">
RIGHT
</div>
</div>
Fiddle : http://fiddle.jshell.net/h8r22mmr/
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
Add more columns .........
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
Add more columns .........
</tr>
</table>
Related
I am kinda beginner and sorry if my question seems too basic.
I have a table that looks like:
--------------------------------------------
|Column 1 |Column 2 |
--------------------------------------------
|this is the text |text |
--------------------------------------------
I wanna make it so:
---------------------------------------------------------------------------------------
|Column 1 |Column 2 |this is the text |text |
---------------------------------------------------------------------------------------
Sample of HTML is:
<html>
<body>
<table width="300px">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>this is the text</td>
<td>text</td>
</tr>
</table>
</body>
</html>
This is the code you are looking for:
<html>
<body>
<table width="300px">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>this is the text</td>
<td>text</td>
</tr>
</table>
</body>
</html>
You had two tr tags, that means two rows, and you said you only need one row so I used only one tr tag
make 100% width of table and make tr display as inline
table {
width: 100%
}
tr {
display: inline
}
<html>
<body>
<table width="300px">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>this is the text</td>
<td>text</td>
</tr>
</table>
</body>
</html>
Try with this CSS
table { table-layout:fixed }
td { overflow:hidden; white-space:nowrap }
The table-layout:fixed rule says "The cell widths of this table depend on what I say, not on the actual content in the cells". This is useful normally because the browser can begin displaying the table after it has received the first <tr>. Otherwise, the browser has to receive the entire table before it can compute the column widths.
If I understood, you want to create a 4 column table.
You declared a 2 column table, (the column is declared with TD)
you have only to declare 4 TD
Try this:
<html>
<body>
<table width="300px">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>this is the text</td>
<td>text</td>
</tr>
</table>
</body>
</html>
.one {
background-color:green;
}
<tr>
<div class="one">
<td>td 1</td>
<td>td 2</td>
</div>
<td>td 3</td>
</tr>
this css command is not working, i want to turn two of the "td" cells into green but it is not happening tell me where i am going wrong. when I write "td" or "tr" instead of one(class name) then it is working properly but not with this class.
You should add class "one" to td directly, for your question div is not necessary element.
<tr>
<td class="one">td 1</td>
<td class="one">td 2</td>
<td>td 3</td>
</tr>
In html I'm using a to display a numbers of rows, then between each row is another row containing a single , that in turn contains a with style:none. This row contains additional information for the row above and in the ful code and can be toggled to display or not by clicking on a button on the album row.
The trouble is that even when the div is hidden the row takes up vertical height, I assume this is the height of the , but how can I fix this. Or another thought can I make the hidden or can I only do that for divs.
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td colspan="2">
<div id="1" style="display:none">
</div>
</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Ive done a:
http://jsfiddle.net/ijabz/zz5zo2jh/
if you remove the hidden rows there is less of a vertical gap between the other rows
apply the style to your table row, not your div:
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr style="display:none">
<td colspan="2">
<div id="1">
</div>
</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
You had to apply style to the tr. Modified your code as follows, now if display is block there is gap and when it is none, no gap:
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr style="display:block;">
<td>
</td>
<td></td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
I'm not sure if i understood you question correctly, so please let me know if not.
If you use Jquery then this would add the display=none to the row with an
$(document).ready(function () {
$('table tr').each(function (i, row) {
console.log(i)//$(row).append("test");
Row = $(row);
if (Row.find("div:hidden").length == 1) {
$(Row).attr("display","none");
}
});
});
Updated your jsfiddle: http://jsfiddle.net/zz5zo2jh/25/
I hope it helps
See this JSFiddle.
Use border-collapse: collapse; on the <table> and padding: 0; on the <tr>.
<tr> elements normally have display: table-row; as default so I wouldn’t change that, because it might lead to some other rendering issues.
<table style="border-collapse:collapse;">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td style="padding:0;" colspan="2">
<div id="d1" style="display:none;margin:1px;"></div>
</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
the margin on the <div> is optional and is only there because the padding has been removed. This way it will look the same if the div is set to display: block;.
I have a table which has spanned rows. When I create an h ref the link is only clickable on the one line I would like to have the link clickable anywhere on that cell.
I've tried the following:
<table>
<tr><td rowspan=2><a style='display:block; width:100%; height:100%;' href='#'</td><td>Cell 2</td><td>Cell 3</td></tr>
<tr><td>Cell 4</td><td>Cell 5</td></tr>
</table>
<table>
<tr><td rowspan=2><a style='display:inline-block; width:100%; height:100%;' href='#'</td><td>Cell 2</td><td>Cell 3</td></tr>
<tr><td>Cell 4</td><td>Cell 5</td></tr>
</table>
Is there a way of getting the link to span both rows?
your html syntax seems incorrect as your tag isn't properly ended. You could try this:
<table>
<tr>
<td rowspan="2">
<a style="display:block; width:100%; height:100%;" href="#">Text in your big cell 1</a>
</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
As you can see, you will better see such problems with nicer indentation ;-)
In the following code I need to match the width when shrinking the window :
<div style="background-color:blue;">The title</div>
<table>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</table>
This is just a little example of the page, it would involve more divs and tables.
When I shrink the window the table and the div shrink as need it so the div will shrink more than the table, and that make the page look ugly.
Is there any way to stop the div shrinking when table can't shrink any more?
I tried min-with and it does not work, and I asked already for anything similar but apparently there isn't anything apart of JavaScript.
Could any of you give me a solution other than JavaScript?
Thanks in advance.
Cesar.
I do not have IE7+ to test this, but in Opera it works when you put all the HTML in an outer div block. Than the outer div block is the same with as the table. So at a certain point it does not fit the browser window any more, but now the outer block has its width and in title div keeps the same width as the outer block.
<div style="background-color:red;">
<div style="background-color:blue;">The title</div>
<table>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</table>
</div>
You can use thead and colspan to display the title inside the table:
<table>
<thead><tr style="background-color:blue;"><th colspan="4">The title</th></tr></thead>
<tbody>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</tbody>
</table>
Bonus point : your table structure now makes more sense from an accessibility point of view.
You can also use the caption element, but its formatting may be inadequate :
<table>
<caption style="background-color:blue;">The title</caption>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</table>