How do I change the columns widths of this html table - html

Is there a way to specify column width here?
Hi, I'm trying to style a table, but I don't know how to specify column width. I've read that the way to do it is by using CSS: <td style="width:130px">
I'm using xampp and I only use a PHP file.
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td>$item</td>
<td><img src='item_image_folder/img'></td>
</tr>
</table>
</body>
</html>
what the table looks like
Category 1
item_name image
item_name image
Category 2
item image
item image
Category 3
long_item_name image

<style>
td {
width:130px;
}
</style>
this is using css styling, specifying the width for the <td>'s

You can use like this.
<table>
<tr>
<th width="200"></th>
<th width="100"></th>
<th width="100"></th>
</tr>
</table>
You can put width attribute with pixel / % format.
(example: width="50")
(example: width="50%")
Reference : https://www.w3schools.com/tags/att_table_width.asp

The problem was in styling each <td>'s width within an echo statement. The solution was to simply use single quotes instead of double quotes
<td width='130px'>$item</td> this one was correct inside of echo"";
<td width="130px">$item</td>
I could also use <td id='cell1'>$item</td> and and style with:
<style>
td#cell1{width:130px;}
</style>

Yes, all you'd need to do is select the cell(s) you want to widen, then set this attribute in your <td> tag: width="40px" (example only - change it however you like). You can also change height in the same way, with the height="20px" attribute.

Related

Which html tags to use for this output

I cannot figure out which HTML tags to use to get the format below. Can someone tell me which ones to use?
Fruit: $ 10,000
Apples: $ 4,000
Orange: $ 6,000
You can use any tag that you want
<p>Fruit: $10,000</p>
<p>Apples: $4,000</p>
<p>Orange: $6,000</p>
<h1>Fruit: $10,000</h1>
<h1>Apples: $4,000</h1>
<h1>Orange: $6,000</h1>
To get the dollar numbers aligned, you could either just use a table:
<table style="width:100%">
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Fruit:</td>
<td>$10,000</td>
</tr>
<tr>
<td>Apples:</td>
<td>$4,000</td>
</tr>
<tr>
<td>Oranges:</td>
<td>$6,000</td>
</tr>
</table>
or you make div elements:
div {
display: inline-block;
}
<div style="width: 50%">Fruit:</div>$10,000
<div style="width: 50%">Apples:</div>$4,000
<div style="width: 50%">Oranges:</div>$6,000
I would definitely use the first version as the style can be changed way easier and it's easier to maintain (you can easily add lines, a table structure, the width, the number of columns, etc.) while you need to code the second example new if you want to change the design, the number of columns, etc.
Nevertheless, both option are good and I hope I could help you.

Align a column with CSS

I want to align columns in a table based on a class on the header.
For example, if I have the following table:
<table>
<thead>
<th>Name</th>
<th class="price">Price</th>
</thead>
<tbody>
....
</tbody>
<table>
I know I can use :nth-of-type but sometimes the column will be the 2th, other time will be the 5th and in some places I'll have several columns in the same table align to the right.
Is there a way to accomplish that?
I don't need to support legacy browsers, not even Internet Explorer 9 (if is works on chrome and/or firefox is enough for me)
Just for clarification, I want to align the text in the columns that are in the body associated with the column at the head
No, you cannot style table cells so that styling depends on a class attribute on a column header th. There is nothing in CSS that connects cells that way.
The most robust way to align a column is to generate class attributes on each cell in it. Well, technically, using the HTML align attribute is even more robust.
EDIT: As commented below this only works with a few properties. Text-align isn't included.
Put this in your CSS:
col.price { text-align:right; }
And your HTML:
<table>
<col />
<col class="price" />
<tr>
<td>First TD of first TR</td>
<td>9,95</td>
</tr>
<tr>
<td>First TD of second TR</td>
<td>4,85</td>
</tr>
</table>
Reference:
http://quirksmode.org/css/css2/columns.html

Horizontal Display Html Table

I'm building a .xslt file to attach to my XML document. I use the following code to display my color code legend:
<footer width="100%">
<table>
<tr>
<td><div style="background-color:#90EE90;width:15px;height:15px;border:1px solid #000;"></div>Nouveauté</td>
<td><div style="background-color:#AFEEEE;width:15px;height:15px;border:1px solid #000;"></div>Modifié</td>
<td><div style="background-color:#FFF;width:15px;height:15px;border:1px solid #000;"></div>Normal</td>
</tr>
</table>
</footer>
Current result
Unfortunately, I get the following result:
Wanted result
Where as my actual result should look like this:
I also tried using list item tags in an unordered list with an inline style display. Also tried making the list items float left, got the same result... I'm not sure why it's not displaying correctly.
You can either use a span instead of div or use float:left on div
Check this fiddle

Html table, make one row larger

I'm not very familiar with HTML, so excuse me if this is something simple, but I couldn't figure it out from googling. Anyway, the problem i'm having can be illustrated by this:
<html>
<body>
<table border="1">
<tr>
<td>lots of words blah blah</td>
</tr>
<tr>
<td>word</td>
<td>word</td>
<td>word</td>
</tr>
</table>
</body>
</html>
Is there a way that rather then have the first column be stretched, that just that first cell gets bigger? Theres only one cell in the first row, so theres alot of empty space. I'd like the cell to expand to fit the row, but instead it either stretches the whole column, or stretches vertically. How do I get around this?
Use the colspan attribute to tell it to cover multiple columns, so in your case the td on your first row would be <td colspan="3">
Set colspan="3" on the first <td> element.
Like this: <td colspan="3">.
The colspan value is how many columns do you want it to take up.
Each of your rows should have the same number of columns. In this case, you can explicitly tell your large cell to span all of the columns, like this:
<tr> <td colspan="3">lots of words blah blah </td> </tr>
you can add the width attribute to the element you want to change.

Removing table line

I want to add two table or more consecutively and they must be seemed like one table.
<html>
<head>
<style type="text/css">
.cls
{
border:1px solid #000000;
}
.cls td {
border:1px solid #000000;
}
</style>
</head>
<body>
<table class="cls">
<tr>
<td>aaa</td><td>bbb</td><td>ccc</td>
</tr>
<tr>
<td>ddd</td><td>eee</td><td>fff</td>
</tr>
</table>
<table class="cls">
<tr>
<td>aaa</td><td>bbb</td><td>ccc</td>
</tr>
<tr>
<td>ddd</td><td>eee</td><td>fff</td>
</tr>
</table>
</body>
</html>
My problem is the line that tables combined has a doble line normally. How can i show it like a single line.
.cls-last
{
border-top: 0px;
}
On your 2nd table:
<table class="cls cls-last">
<tr>
<td>aaa</td><td>bbb</td><td>ccc</td>
</tr>
<tr>
<td>ddd</td><td>eee</td><td>fff</td>
</tr>
</table>
You could change the top (or bottom) border of the table via CSS.
However, alignment could be a challenge here. In the example you gave, not a problem--each contains 3 (relatively) similar characters each. So, it'd be nearly identical. However if one column in one table has 10 characters for instance, HTML is going to stretch that column and you're going to be left with two obviously different entities.
So, to make this work 100% of the time, you're going to need to set widths and (possibly) overflow properties as well.
I'm having a tough time understanding why you'd have to do it this way. I'm sure you've got a reason, but two similar entities with similar widths and columns should be able to be commingled. If the tables were to only sometimes appear, or you wanted to remove rows, you could do so via Javascript and/or CSS or at the server level when rendering.