I am creating a test transcipt page with 2 tables (so far) and there is this cell line on the bottom table to the left (as pointed out with arrows) that will only align, if the table data on the right is misaligned (as pointed out with the orange line)
If I change the padding-left property on the table data on the bottom table (Example of table data "A", "E", etc.) to align with the table data above, the left line will misalign shown here:
Is there a way where I can have both lines on the left align as shown in the very first image but also having the table data be aligned as shown in the last image?
I found a way to get the table data and the cell lines to align without looking at those eight "2"s.
On the word "Geometry" I added 2 divs one before it and one after.
I put four "2"s in each div and gave each div the same class name.
In external CSS I set two properties:
.HiddenText
{
display: inline;
color: #ffffff;
}
That way the table header is center, the table data is center, the 2 lines are aligned and there aren't any ugly "2"s to look at.
Image:
https://imgur.com/a/gxiVZdo
Let me know if y'all need more code to understand this.
If you want to get the grades data at the center in that column then use <center> tag at every data of grades like: <td><center>A</center></td> it's the easiest way of doing this. If that's not the case then, there are many ways of doing this, so it's on you which way you are working. So, please do share your code.
Related
I just came across these questions. I am not getting the answer. Can someone help
The components which is used to position HTML document either vertically and horizontally is
a. Table
b. Forms
c. Frame
d. Lists
Can we create both the vertical and horizontal frames in a webpage at the same time?
I guess that would be table as you can create tables horizontally as well as vertically.
These are called Table Rows and Columns. Let me explain.
You basically create different (table row) elements with inside a table header or a table data element inside a .
When you create 1 row with multiple data elements, you created a horizontal table.
When you create multiple rows with each one data element inside, you have created a vertical table.
I hope this answers your question.
The text in different 's inside a html table is not aligned on the same line.
One of column of this table has multiple lines of text.For example,
Header1|Header2
---------------
|This is
Ex |an Example
If the second column has multiple lines of text, then both the column text does not start on the same line which is required.
Currently i have not applied any styles to the table/td
Please suggest any solution.
Because the text of the table is aligned to middle by default, you need to set the alignment of the text so that you can achieve what you want. Use vertical-align:top so that even if the 2nd column has multiple lines, both of the text will start at the top of the table.
th,td{
vertical-align:top;
}
For visualization here is the jsfiddle.
I have a requirement to display some data to a user.
The data is displayed as "Label: InputForLabel" and will have two columns. It looks like this:
I started by just using a table with four columns for every row. Each column has a width of 25% and the table has a width of 100% -- so this gives the display we see above.
.ContentTable {
width: 100%;
}
.ContentTable tr {
height: 18px;
}
.ContentTable tr td{
width: 25%;
}
Now, I have an additional requirement to be able to dynamically remove a given item and its label. If I just hide the item/label - a gap would be left in the table. I'm hoping to always have 2 item/labels displayed per row and have everything just sort of collapse upwards as item/labels are hidden.
Does this sound like something divs would be able to do more easily? Or is there a way to tell a table object "Always have this many columns for each row. If a column is hidden, pull up the first column from the next row and slide everything forward"?
There is no point in having one big table, so even if you stay with a markup made of tables, you should split it into two columns (which will makes your problem about showing/hiding some rows of one of the column disappear :o).
Then, we could ask the question weither or not the table layout is suited when you have split the content into two columns : I think MasterAM is right and you should give it a try using ul for this kind of layout (and hiding just an element of a list is still as easy as it is with a row in a table)
It is nice in word processors to create short-term column layouts with documents by using tab key with the defined anchors across the top instead of using tables because you can run overlaps like this.
L R
column a row 1 column a row two
this is the first column! on the right
This allows for overlap, or naturally spanning columns without the need for so much structure. Great when you don't need borders.
Can this layout be done in HTML? I know a tabbed layout can be accomplished on a webpage, what I don't know is if you can set the column locations like you can in StarOffice/LibreOffice/OpenOffice Text or in Microsoft Word.
Using div tags with the float: left and float: right styles, you can achieve this type of structure.
I need to create three divs, next to each other (attribute float:left).
Then I read the data from database and I need to present this data in three divs, in such a way that I first fill up the first div, line by line and when I reach certain height, I go to the next div and fill it with data, and so on.
This is something like reverse table, that is I first fill the first column in first row then go to second and so on until the end of the row, then I move to the second column of first row
and so on. I hope you get the picture.
Is there a way to achieve this in CSS or in some other way?
This functionality is available in CSS3 using column-count and column-span.
I do not know how to make it efficient, but it should be possible with javascript... you know the line-height, you check the height of first div with all content, then you truncate it to desired size and the rest put to the next div.. repeat.. but this looks odd.. ?
You might be able to do this by requesting the first 30 results in the database in one column, then request the next 30 in the next div, and so on. I can't see it being possible in CSS 2.1 alone.