Which of the following HTML code will affect the vertical alignment of the table content?
(A) <td style = “vertical-align : middle” > Text Here <\td>
(B) <td valign = “centre”> Text Here <\td>
(C) <td style = “text-align : center” > Text Here <\td>
(D) <td align = “ middle” > Text Here <\td>
Explanation:
|
Attribute |
Value |
Explanation |
|
align=" " |
horizontal alignment in cell |
|
|
left |
aligns to the left(Default) |
|
|
center |
aligns to the center |
|
|
right |
aligns to the right |
|
|
valign=" " |
vertical alignment in cell |
|
|
top |
aligns to the top |
|
|
middle |
aligns to the middle (Default) |
|
|
bottom |
aligns to the bottom |
|
|
|
baseline |
The baseline is the line where most of the characters
sit. |
CSS text-align and vertical-align property
|
Attribute |
Value |
Explanation |
|
Style=”text-align:center;” |
horizontal alignment in cell |
|
|
left |
aligns to the left(Default) |
|
|
center |
aligns to the center |
|
|
right |
aligns to the right |
|
|
Style=”vertical-align:middle;” |
vertical alignment in cell |
|
|
top |
aligns to the top |
|
|
middle |
aligns to the middle (Default) |
|
|
bottom |
aligns to the bottom |
|
|
|
baseline |
The baseline is the line where most of the characters
sit. |
Option (A) is correct as vertical-align:middle is the css vertical alignment property
Option (B) is wrong as valign does not have center value
Option (C) is wrong as text-align:center is a horizontal property in CSS
Option (D) is wrong as align does not have middle value
Example
<html>
<body>
<table height="300px" width="200px" border="1">
<tr>
<td valign="top">Cell A</td>
<td valign="baseline">Cell B</td>
</tr>
<tr>
<td valign="bottom">Cell C</td>
<td valign="middle">Cell D</td>
</tr>
<tr>
<td>Cell A</td>
<td style="vertical-align:baseline">Cell B</td>
</tr>
<tr>
<td style="vertical-align:bottom">Cell C</td>
<td style="vertical-align:top">Cell D</td>
</tr>
<tr>
<td style="text-align:center">Cell A</td>
<td style="vertical-align:middle">Cell B</td>
</tr>
</table>
No comments:
Post a Comment