Okay so I don't even know if this is possible, but I'm trying to accomplish the following design with the use of a <table>:
I know it would be easier to just use a <span> and not even bother with tables, but I figured a <table> would actually make sense here.
This is what I have so far:
table {
text-align: left;
}
<table>
<tr>
<th>Population:</th>
<td>334,300</td>
</tr>
<tr>
<th>Region:</th>
<td>Europe</td>
</tr>
<tr>
<th>Capital:</th>
<td>Reykjavík</td>
</tr>
</table>
You could just set a display:flex on tr and it would do the job. Like so:
tr {
display:flex;
}
<table>
<tr>
<th>Population:</th>
<td>334,300</td>
</tr>
<tr>
<th>Region:</th>
<td>Europe</td>
</tr>
<tr>
<th>Capital:</th>
<td>Reykjavík</td>
</tr>
</table>
You can reset display values for th and td
table {
text-align: left;
}
th,td {display:inline;}
<table>
<tr>
<th>Population:</th>
<td>334,300</td>
</tr>
<tr>
<th>Region:</th>
<td>Europe</td>
</tr>
<tr>
<th>Capital:</th>
<td>Reykjavík</td>
</tr>
</table>
Related
How do i give a border to the <tr>(t_border).
The inner table shouldnt inherit the style from the outer one
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>
<table class="t_border">
<tr>
<td>B</td>
</tr>
</td>
</tr>
</tbody>
You can try as per my code:
<style>
table{
border-collapse: collapse;
}
table.t_border tr{
border:solid 1px red;
}
</style>
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>
<table class="t_border">
<tr>
<td>B</td><td>B</td><td>B</td>
</tr>
</table>
</td>
</tr>
</table>
Hope it might help you!
you can set separate style for the class .t_border, see example code..
<table>
<tr>
<td>A</td>
</tr>
<tr>
<td>
<table class="t_border">
<tr>
<td>B</td>
</tr>
</td>
</tr>
</table></td></tr></table>
<style>
.t_border
{
border: 1px solid red;
}
</style>
just give style of tr tag
<tr>
<td style="border : 1px solid black">B</td>
</tr>
If you need to style your border, you may use other answers.
But if you only need to use the pure HTML table style, you can use this :
<table border=1> to give border on your table inside table.
You can't add a border to a <tr>. You would have to add it to the <td>s. Also your t_border table isn't be being closed </table> and your outer table should be closed with </table> instead of </tbody>.
Just giving the border to the tr won't really have an effect. It would be better to give the td's a border top or bottom of what you want it to actually show up. For example, border-bottom:2px solid black;
I encountered strange problem with table styling. Everything at least for me in code seems to be fine. however effects are unexpected.
I have to leave 0.3em margin as this is my student task, but I don't want the lines in the bottom to be separate.
Any webmaster can help? I would be very thankful. Here is peace of my code:
<table>
<tr>
<td>Kategoriasystematyczna</td>
<td>Takson</td>
</tr>
<tr>
<td>Domena</td>
<td>eukarionty</td>
</tr>
<tr>
<td>Królestwo</td>
<td>zwierzęta</td>
</tr>
<tr>
<td>Gromada</td>
<td>ssaki</td>
</tr>
<tr>
<td>Podgromada</td>
<td>ssakiżyworodne
<td>
</tr>
<tr>
<td>Infragromada</td>
<td>łożyskowce
<td>
</tr>
<tr>
<td>Rząd</td>
<td>parzystokopytne
<td>
</tr>
<tr>
<td>Rodzina</td>
<td>żyrafowate
<td>
</tr>
<tr>
<td>Rodzaj</td>
<td>Giraffa(Brünnich,1771)
<td>
</tr>
<tr>
<td>Gatunek</td>
<td>żyrafa
<td>
</tr>
</table>
and style
td{
border:1pxsolidblue;
margin:0.3em,0.3em,0.3em,0.3em;
}
table{
border:1pxsolidblue;
border-collapse:collapse;
}
And this is how my table looks like
Anyone? Antyhing?
you have opening tags instead of closing tags td:
change
<td>Gatunek</td>
<td>żyrafa
<td>
to
<td>Gatunek</td>
<td>żyrafa
</td>
in various places
As mentioned in my original comment to your answer (prior to deletion for redundancy), the problem is the syntax errors of unclosed <td> elements (possibly typos), correcting your HTML fixes the problem. Corrected HTML:
<table>
<tr>
<td>Kategoriasystematyczna</td>
<td>Takson</td>
</tr>
<tr>
<td>Domena</td>
<td>eukarionty</td>
</tr>
<tr>
<td>Królestwo</td>
<td>zwierzęta</td>
</tr>
<tr>
<td>Gromada</td>
<td>ssaki</td>
</tr>
<tr>
<td>Podgromada</td>
<td>ssakiżyworodne</td>
</tr>
<tr>
<td>Infragromada</td>
<td>łożyskowce</td>
</tr>
<tr>
<td>Rząd</td>
<td>parzystokopytne</td>
</tr>
<tr>
<td>Rodzina</td>
<td>żyrafowate</td>
</tr>
<tr>
<td>Rodzaj</td>
<td>Giraffa(Brünnich,1771)</td>
</tr>
<tr>
<td>Gatunek</td>
<td>żyrafa</td>
</tr>
</table>
JS Fiddle demo.
Also, your CSS is problematic, you have commas between the values of your margin property-values and no spaces to separate the properties of the border; fixed, it should look like:
td {
border: 1px solid blue;
margin: 0.3em;
}
table {
border: 1px solid blue;
border-collapse: collapse;
}
I am trying to fix the width no matter of what the content is. But, the width of the table is changing according to it's content. How can I fix it?
Here is my code:
<style>
table{width:25px; background:#66f;}
</style>
<table>
<tr>
<td>sn</td>
<td style="width:20px;">Name</td>
</tr>
<tr>
<td>1</td>
<td>Wolfeschlegelsteinhausenbergerdorff</td>
</tr>
</table>
Try this
<table>
<tbody><tr>
<td>sn</td>
<td style="width:20px;">Name</td>
</tr>
<tr>
<td>1</td>
<td style="word-break: break-all;">Wolfeschlegelsteinhausenbergerdorff</td>
</tr>
</tbody>
</table>
You need to use table-layout: fixed; and provide width to your table and td elements accordingly.
You should also use word-wrap: break-word; so that you don't get in trouble if you encounter a non-breaked string
Demo
you don't mentioned style class table with dot extension and it won't be called using class attribute.
Here is the code:
<style>
.table{
width:25px; background:#66f;
}
</style>
<table class="table">
<tr>
<td>sn</td>
<td style="width:20px;">Name</td>
</tr>
<tr>
<td>1</td>
<td>Wolfeschlegelsteinhausenbergerdorff</td>
</tr>
</table>
So it is pretty straight forward. I need a way to group cells together. Like a <div> or a <span> but none of them worked. <tbody> seemed like a good solution but it only works for table rows. Help!
If you're looking for a way to merge 2 o more cells in a row into one single cell, along with other "regular" cells (as you would do in a google|excel spreadsheet) in a way similar to this:
then you can use the colspan attribute for td elements, indicating how many cells are you merging:
<tr>
<td colspan=2> Merged Cell occupying 2 columns </td>
</tr>
<tr>
<td> Regular cell </td>
<td> Another cell in same row </td>
</tr>
Additionally, you can use the td[colspan] selector in css (combined with any parent selector of your choice) to refer to these merged cells.
Here's a working example:
/* Style for cells with any colspan attribute */
td[colspan] {
text-align: center;
}
/* No extra space between cells */
table {
border-collapse: collapse;
}
th, td {
border: 1px solid gray;
margin: 0;
padding: 3px 10px;
text-align: right;
}
<table>
<tr>
<th>Day</th>
<th>Invoice</th>
<th>Total</th>
</tr>
<tr>
<!-- this cell will occupy 3 columns -->
<td colspan=3>January</td>
</tr>
<tr>
<td>2</td>
<td>0348</td>
<td>248.35</td>
</tr>
<tr>
<td>7</td>
<td>0349</td>
<td>126.14</td>
</tr>
<tr>
<td>18</td>
<td>0350</td>
<td>821.99</td>
</tr>
<tr>
<td colspan=3>February</td>
</tr>
<tr>
<td>27</td>
<td>0351</td>
<td>643.50</td>
</tr>
</table>
You can add the html col tag to group the columns td.
.col-group-1 {
background-color: yellow;
}
.col-group-2 {
background-color: silver;
}
<table>
<colgroup>
<col class="col-group-1">
<col span="2" class="col-group-2">
</colgroup>
<tr>
<th>Name</th>
<th>City</th>
<th>Phone</th>
</tr>
<tr>
<td>Mary</td>
<td>New york</td>
<td>987654321</td>
</tr>
<tr>
<td>Magdalena</td>
<td>Los Angeles</td>
<td>123456789</td>
</tr>
</table>
</body>
</html>
Please check out the html col tag
and how to use them with css styling
How do I get these tables to slide under each other without the extra space?
<table border="0">
<tbody>
<tr>
<th>And another</th>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
</tbody>
</table>
<table border="0">
<tbody>
<tr>
<th>And another</th>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
</tbody>
</table>
<table border="0">
<tbody>
<tr>
<th>And another</th>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
</tbody>
</table>
<table border="0">
<tbody>
<tr>
<th>And another</th>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
<tr>
<td>Some stuff in the table. </td>
</tr>
</tbody>
</table>
CSS
/* ---------------[ Tables ]--------------- */
table {
float: left;
width: 285px;
}
tr, td, th {
margin:auto;
}
td, th {
padding:5px;
vertical-align:top;
}
th {
font-weight:bold;
background:#ddd;
}
td {
border:1px solid #ddd;
}
Thanks
You could try adding clear: left to your tables:
table {
float: left;
clear: left;
width: 285px;
}
Demo: http://jsfiddle.net/ambiguous/AsUSj/
You might need to play with the panel sizes in the fiddle to convince yourself that it works.
either set width to 100% on tables or put a width on their parent element with width 285px
Unfortunately, pure floating wont do what you want it to in this case. The simplest fix is non-semantic: Wrap the left column in a div that's floated to the left, with a width of 50% or some other suitable number, and wrap the right column in a div that's floated to the right, with a width of 50% or some other suitable number.
The alternative to preserve semantics unfortunately relies on either absolute positioning (which wont work for dynamic tables) or JavaScript. jQuery Masonry is a reasonable way of aligning columns of stuff so that it all fits together nicely, but unfortunately will not work for users without JavaScript enabled.
table {
display: block;
width: 285px;
}